### Install Dependencies

Source: https://github.com/michalsnik/aos/blob/next/CONTRIBUTING.md

Run this command to install all project dependencies.

```bash
yarn
```

--------------------------------

### Minimal AOS Setup

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Basic setup for AOS, including necessary imports for the library and its CSS. This initializes AOS with all default settings.

```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();  // All defaults
```

--------------------------------

### Zoom Animations Example

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

HTML examples for zoom animations. 'data-aos-delay' can be used to offset the animation start. Supports both zooming in and out.

```html
<div data-aos="zoom-in" data-aos-delay="100">Zoom in from small</div>
<div data-aos="zoom-out-up">Zoom out while rising</div>
```

--------------------------------

### Basic AOS Setup

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/INDEX.md

Import AOS and its CSS, then initialize the library for basic animations.

```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';
AOS.init();
```

--------------------------------

### Install AOS via npm or yarn

Source: https://github.com/michalsnik/aos/blob/next/README.md

Install the AOS package using either npm or yarn. Ensure you install the 'next' version.

```bash
yarn add aos@next
```

```bash
npm install --save aos@next
```

--------------------------------

### Handle Scroll Event Listener

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/observers-and-internals.md

Example of how to set up a scroll event listener to trigger the handleScroll function with prepared elements.

```javascript
import handleScroll from './helpers/handleScroll';

window.addEventListener('scroll', () => {
  handleScroll(preparedElements);
});
```

--------------------------------

### Fade Animations Example

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

HTML examples demonstrating fade animations. Use the 'data-aos' attribute for animation type and 'data-aos-duration' for custom timing.

```html
<div data-aos="fade-up">This will fade in while moving up</div>
<div data-aos="fade-down" data-aos-duration="800">Slower fade-down</div>
```

--------------------------------

### Calculate Animation Trigger Point

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/offset-calculator.md

Example of using `getPositionIn` to find when an element's animation should start. This snippet demonstrates how to query an element, call the function with default values, and log the resulting trigger point. It also shows a common pattern for applying animations based on the calculated scroll position.

```javascript
import { getPositionIn } from './helpers/offsetCalculator';

const element = document.querySelector('[data-aos="fade-up"]');
const triggerPoint = getPositionIn(element, 120, 'top-bottom');

// Returns scroll position where element animation starts
console.log(`Animation triggers at scroll position: ${triggerPoint}px`);

// Later in scroll handler:
if (window.pageYOffset >= triggerPoint) {
  // Apply animation class
}
```

--------------------------------

### Example Usage of elements() Helper

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/observers-and-internals.md

Demonstrates how to import and use the `elements` helper to find AOS elements and log their `data-aos` attributes.

```javascript
import elements from './helpers/elements';

const aosElements = elements();
console.log(`Found ${aosElements.length} AOS elements`);

aosElements.forEach(el => {
  console.log(el.node.getAttribute('data-aos'));
});
```

--------------------------------

### Example Compiled CSS for Easing

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/css-implementation.md

An example of the compiled CSS output for a specific easing function ('ease-in-out'), demonstrating how the SCSS rule generation translates into actual CSS selectors and properties.

```css
body[data-aos-easing="ease-in-out"] [data-aos],
[data-aos][data-aos-easing="ease-in-out"] {
  transition-timing-function: cubic-bezier(.420, 0, .580, 1);
}
```

--------------------------------

### Slide Animations Example

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

HTML examples for slide animations. 'data-aos-duration' can adjust the speed. Note that slide animations use 'visibility' for better stacking.

```html
<div data-aos="slide-up" data-aos-duration="600">Slides up into view</div>
<div data-aos="slide-right">Slides right from left edge</div>
```

--------------------------------

### Minimal HTML + Script Tags Setup

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Include AOS via CDN by adding the stylesheet and script tags to your HTML. Initialize AOS with a script tag.

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
  <div data-aos="fade-up">Fades up on scroll</div>
  
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>
</html>
```

--------------------------------

### AOS CSS Animation Classes

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/aos-main-api.md

Example CSS demonstrating how to style elements with the `aos-init` and `aos-animate` classes to control animations.

```css
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}
```

--------------------------------

### HTML Anchor Placement Examples

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

Configure animation trigger points by setting the `data-aos-anchor-placement` attribute. This attribute defines how the element's position aligns with the viewport's position to initiate the animation. Examples include default, centered, and last-triggering placements, as well as using a custom anchor element.

```html
<!-- Triggers when element top reaches window bottom (default) -->
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom">Default</div>
```

```html
<!-- Triggers when element center reaches window center -->
<div data-aos="fade-up" data-aos-anchor-placement="center-center">
  Centered trigger
</div>
```

```html
<!-- Triggers when element top reaches window top -->
<div data-aos="fade-up" data-aos-anchor-placement="top-top">
  Triggers last (element already visible)
</div>
```

```html
<!-- With custom anchor element -->
<div id="reference"></div>
<div data-aos="fade-up" data-aos-anchor="#reference" data-aos-anchor-placement="bottom-center">
  Triggers based on #reference position
</div>
```

--------------------------------

### AOS Usage Examples

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/types.md

Demonstrates how to apply different AOS animations using the 'data-aos' attribute.

```html
<div data-aos="fade-up">Fade up animation</div>
<div data-aos="zoom-in">Zoom in animation</div>
<div data-aos="flip-left">Flip left animation</div>
```

--------------------------------

### Get Element Offset with offset()

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/types.md

This JavaScript example shows how to import and use the getOffset function to retrieve the position of a DOM element. It logs the element's distance from the top and left of the document.

```javascript
import getOffset from './libs/offset';

const element = document.querySelector('[data-aos]');
const pos: OffsetObject = getOffset(element);

console.log(`Element is ${pos.top}px from top`);
console.log(`Element is ${pos.left}px from left`);
```

--------------------------------

### Example Compiled CSS for Delay Rules

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/css-implementation.md

This is an example of the compiled CSS output for the generated delay rules. It demonstrates how the `transition-delay` property is managed, being `0s` initially and then set to the specified delay once the `aos-animate` class is applied.

```css
body[data-aos-delay='100'] [data-aos],
[data-aos][data-aos-delay='100'] {
  transition-delay: 0s;
}

body[data-aos-delay='100'] [data-aos].aos-animate,
[data-aos][data-aos-delay='100'].aos-animate {
  transition-delay: 100ms;
}
```

--------------------------------

### Run Development Server

Source: https://github.com/michalsnik/aos/blob/next/CONTRIBUTING.md

Starts the rollup build and a development server in watch mode. This will launch a local server at http://localhost:8080, build AOS, and automatically refresh the page on changes.

```bash
yarn dev
```

--------------------------------

### Module/Bundle Setup with AOS Initialization

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Import AOS and its CSS in your main JavaScript file for use with module bundlers. AOS is initialized with custom settings for duration, easing, and once-only animation.

```javascript
// main.js or index.js
import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init({
  duration: 400,
  easing: 'ease-out',
  once: true
});
```

```html
<!-- index.html -->
<div data-aos="fade-up">Animated content</div>
```

--------------------------------

### Animate.css Element Example

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

An example of an HTML element configured to use Animate.css animations via AOS, leveraging the 'useClassNames' option.

```html
<div data-aos="fadeInUp">Uses Animate.css fadeInUp class</div>
```

--------------------------------

### Example of Data-AOS as Classes with Animate.css

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Configure AOS to use `data-aos` values as CSS classes, set `animatedClassName` to 'animated' (for Animate.css), and disable `initClassName`. This setup makes elements with `data-aos="fadeInUp"` receive the class `animated fadeInUp` when animated.

```javascript
AOS.init({
  useClassNames: true,
  animatedClassName: 'animated',
  initClassName: false
});
```

--------------------------------

### Complex Example with Anchor and Offset (JS)

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/offset-calculator.md

This JavaScript snippet shows how the `getPositionIn` function would be used in conjunction with the HTML example above, where the animation trigger is determined by the position of a fixed navigation element.

```javascript
// Animation triggers when fixed nav's center aligns with window center
// Plus 50px offset
const triggerPoint = getPositionIn(contentElement, 120, 'top-bottom');
```

--------------------------------

### Animate.css Fade-in Animation Example

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/css-implementation.md

Example of an HTML element that will receive the 'animated' and 'fadeInUp' classes when animated by AOS, leveraging Animate.css.

```html
<!-- Becomes class="animated fadeInUp" when animated -->
<div data-aos="fadeInUp"></div>
```

--------------------------------

### Optimize Animation Selection for Mobile

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Conditionally apply simpler animations on smaller screens to maintain performance. This example sets 'fade' for mobile and 'fade-up' for larger screens.

```javascript
function getAnimationType() {
  return window.innerWidth < 768 ? 'fade' : 'fade-up';
}

AOS.init();
document.querySelectorAll('[data-aos]').forEach(el => {
  el.setAttribute('data-aos', getAnimationType());
});
```

--------------------------------

### observer.ready(selector, callback)

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/observers-and-internals.md

Starts observing the document for DOM mutations and invokes a callback function when AOS elements are added or removed.

```APIDOC
## observer.ready(selector, callback)

### Description
Starts observing the document for mutations and invokes callback when AOS elements are added/removed.

### Method
`ready(selector: string, callback: Function): void`

### Parameters
#### Path Parameters
- **selector** (`string`): CSS selector to match (typically `'[data-aos]'`); currently unused internally.
- **callback** (`Function`): Function to call when AOS elements are mutated.

### Behavior
1. Observes the entire document (`html` element) for mutations.
2. Monitors both added and removed child nodes.
3. Recursively checks if any mutation involves elements with `data-aos` attributes.
4. Calls the callback function if mutations affect AOS elements.
5. Observes with options: `{ childList: true, subtree: true, removedNodes: true }`.

### Use Case
When AOS is initialized, it attaches the `refreshHard` callback to detect dynamically loaded content:
```javascript
if (!options.disableMutationObserver) {
  observer.ready('[data-aos]', refreshHard);
}
```
Now whenever content with `data-aos` elements is added via AJAX or DOM manipulation, `refreshHard()` is automatically called.

### Example
```javascript
import observer from './libs/observer';

observer.ready('[data-aos]', () => {
  console.log('AOS elements were added or removed!');
  // Rebuild and recalculate positions
});
```
```

--------------------------------

### Start Observing DOM Mutations

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/observers-and-internals.md

Starts observing the document for mutations and invokes a callback when AOS elements are added or removed. This is typically used to handle dynamically loaded content.

```javascript
ready(selector: string, callback: Function): void
```

```javascript
if (!options.disableMutationObserver) {
  observer.ready('[data-aos]', refreshHard);
}
```

```javascript
import observer from './libs/observer';

observer.ready('[data-aos]', () => {
  console.log('AOS elements were added or removed!');
  // Rebuild and recalculate positions
});
```

--------------------------------

### Flip Animation HTML Examples

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

HTML elements with AOS flip animations applied, demonstrating different flip directions and durations.

```html
<div data-aos="flip-left" data-aos-duration="1000">Flips in from left</div>
<div data-aos="flip-up" data-aos-easing="ease-in-out">Flips from above</div>
```

--------------------------------

### Example Compiled CSS for Duration Rules

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/css-implementation.md

This is an example of the compiled CSS output for the generated duration rules. It shows how specific durations are applied to elements with the `data-aos` attribute.

```css
body[data-aos-duration='50'] [data-aos],
[data-aos][data-aos-duration='50'] {
  transition-duration: 50ms;
}

body[data-aos-duration='100'] [data-aos],
[data-aos][data-aos-duration='100'] {
  transition-duration: 100ms;
}

/* ... continues through 3000ms ... */
```

--------------------------------

### Complex Example with Anchor and Offset

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/offset-calculator.md

Illustrates how to use `data-aos-anchor` and `data-aos-offset` attributes to control animation triggers. This is useful for synchronizing animations with other elements or applying custom spacing.

```html
<div id="fixed-nav" style="position: fixed;">Nav</div>

<div
  data-aos="fade-in"
  data-aos-anchor="#fixed-nav"
  data-aos-anchor-placement="bottom-center"
  data-aos-offset="50"
>
  Content
</div>
```

--------------------------------

### Initialize AOS Animation

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/README.md

Import AOS and its CSS, then initialize the library. This setup enables scroll animations for elements marked with 'data-aos' attributes.

```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();
```

--------------------------------

### Set Custom Initialization Trigger Event

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Configure the `startEvent` option to specify which DOM event triggers AOS initialization. This example shows how to wait for a custom event named 'my-app-ready'.

```javascript
// Wait for custom event
AOS.init({ startEvent: 'my-app-ready' });

// Dispatch when app is ready
document.dispatchEvent(new Event('my-app-ready'));
```

--------------------------------

### Configure Initial Delay for Animations

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Use the `delay` option to set a delay in milliseconds before an animation starts after the element enters the viewport. This can be configured globally or for individual elements.

```javascript
AOS.init({ delay: 100 });
```

```html
<div data-aos="fade-up" data-aos-delay="300">Waits 300ms</div>
```

--------------------------------

### Global AOS Settings via Body Attributes

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/css-implementation.md

Example of setting global easing, duration, and delay for AOS animations by applying data attributes to the body element.

```html
<body 
  data-aos-easing="ease"      <!-- Global easing -->
  data-aos-duration="400"     <!-- Global duration -->
  data-aos-delay="0"          <!-- Global delay -->
>
```

--------------------------------

### Easing Function HTML Examples

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

HTML elements with AOS animations using custom easing functions to control animation speed and feel.

```html
<div data-aos="fade-up" data-aos-easing="ease-out-cubic">Smooth deceleration</div>
<div data-aos="zoom-in" data-aos-easing="ease-in-back">Slight overshoot</div>
```

--------------------------------

### Custom CSS for Extended Duration Support

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/types.md

Provides an example of custom CSS to support duration values outside the default 50ms increment range, such as 4000ms.

```css
/* Add support for 4000ms duration */
body[data-aos-duration='4000'] [data-aos],
[data-aos][data-aos-duration='4000'] {
  transition-duration: 4000ms;
}
```

--------------------------------

### CSS for Custom Transition Duration

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

Add custom CSS rules to support transition durations outside the default range. This example adds support for a 4000ms duration.

```css
body[data-aos-duration='4000'] [data-aos],
[data-aos][data-aos][data-aos-duration='4000'] {
  transition-duration: 4000ms;
}
```

--------------------------------

### Element Configuration with Data Attributes

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/aos-main-api.md

Configure per-element animation behavior using data-aos-* attributes directly on HTML elements. This example shows various attributes for controlling animation type, offset, delay, duration, easing, and more.

```html
<div
  data-aos="fade-up"
  data-aos-offset="100"
  data-aos-delay="50"
  data-aos-duration="800"
  data-aos-easing="ease-in-out"
  data-aos-once="true"
  data-aos-mirror="false"
  data-aos-anchor-placement="top-center"
  data-aos-anchor=".parent-element"
  data-aos-id="my-element"
>
  Content to animate
</div>
```

--------------------------------

### Custom Bounce Animation CSS

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

Define custom animations by starting with opacity or transform, setting transition-property, and using the .aos-animate selector for the final state. This example creates a 'custom-bounce' effect.

```css
[data-aos="custom-bounce"] {
  opacity: 0;
  transform: translateY(50px);
  transition-property: opacity, transform;

  &.aos-animate {
    opacity: 1;
    transform: translateY(0);
    animation: bounce 0.6s ease-out;
  }
}

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
```

--------------------------------

### AOS Initialization with Configuration

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/types.md

Demonstrates how to initialize AOS with custom settings. Import AOS and pass a configuration object to the init method to customize animation behavior.

```javascript
import AOS from 'aos';

const config: AOSSettings = {
  duration: 800,
  easing: 'ease-in-out',
  once: true
};

AOS.init(config);
```

--------------------------------

### Using the Detector Singleton

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/types.md

Demonstrates how to import and use the exported Detector singleton to check device and browser properties.

```javascript
import detect from './helpers/detector';

detect.phone();   // true or false
detect.mobile();  // true or false
detect.tablet();  // true or false
detect.ie11();    // true or false
```

--------------------------------

### Import and use the singleton detector instance

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/detector.md

Demonstrates how to import and use the exported singleton instance of the Detector module for various detection methods.

```javascript
import detect from './helpers/detector';

detect.phone();  // ✓ Works
detect.mobile(); // ✓ Works
detect.tablet(); // ✓ Works
detect.ie11();   // ✓ Works
```

--------------------------------

### Global AOS Initialization with Defaults

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Demonstrates initializing AOS with specific global settings that override default values. Per-element attributes can further override these.

```javascript
AOS.init({
  duration: 400,    // Global default
  offset: 120       // Global default
});
```

--------------------------------

### prepare(elements, options)

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/observers-and-internals.md

Enriches each element with position calculations and parsed animation options, extending the element objects with necessary data for AOS animations.

```APIDOC
## prepare(elements, options)

### Description
Enriches each element with position calculations and parsed options.

### Signature
```javascript
prepare(
  elements: Element[],
  options: AOSSettings
): EnrichedElement[]
```

### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| elements | `Element[]` | Array from `elements()` helper |
| options | `AOSSettings` | Global AOS options |

### Return Value
Returns the same array but with enhanced objects:

```javascript
{
  node: Element,
  position: {
    in: number,           // Scroll position to trigger animation
    out: number | false   // Scroll position to reverse (if mirror enabled)
  },
  options: {
    once: boolean,        // Animate only once
    mirror: boolean,      // Animate out on scroll past
    animatedClassNames: string[],  // Classes to apply/remove
    id: string | undefined // For custom events
  }
}
```

### Behavior

1. **Parses Per-Element Settings**
   - Reads `data-aos-*` attributes
   - Falls back to global options
   - Converts string values to proper types

2. **Builds Animated Class Names**
   - Starts with `options.animatedClassName` (default: `'aos-animate'`)
   - If `useClassNames: true`, appends classes from `data-aos` value
   - Example: `data-aos="fade-up"` becomes class `'fade-up'`

3. **Applies Init Class**
   - Adds `options.initClassName` to element if set
   - Marks element as AOS-managed

4. **Calculates Positions**
   - Calls `getPositionIn()` and `getPositionOut()` from offset calculator
   - Stores trigger points for later scroll detection

### Example
```javascript
import prepare from './helpers/prepare';

const rawElements = [
  { node: element1 },
  { node: element2 }
];

const prepared = prepare(rawElements, {
  offset: 120,
  duration: 400,
  easing: 'ease',
  once: false,
  mirror: true,
  anchorPlacement: 'top-bottom'
});

// Now each element has calculated positions
console.log(prepared[0].position.in);   // Scroll position to trigger
console.log(prepared[0].position.out);  // Scroll position to reverse
```
```

--------------------------------

### Initialize AOS with Default Settings

Source: https://github.com/michalsnik/aos/blob/next/README.md

Basic initialization of AOS. This will apply default animations and settings.

```javascript
AOS.init();
```

--------------------------------

### Initialize AOS with Defaults

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/aos-main-api.md

Call `AOS.init()` without any arguments to initialize the library with its default configuration settings. Ensure AOS CSS is imported.

```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';

// Initialize with defaults
AOS.init();
```

--------------------------------

### Include AOS Script and Initialize

Source: https://github.com/michalsnik/aos/blob/next/README.md

Place this script tag before the closing </body> tag and initialize AOS. This is for basic HTML inclusion.

```html
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
```

--------------------------------

### AOS Configuration for Marketing Site

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Employ faster animations with 'once: true' for improved performance on marketing sites. Tune 'duration', 'easing', 'once', and 'offset'.

```javascript
AOS.init({
  duration: 400,
  easing: 'ease',
  once: true,
  offset: 100
});
```

--------------------------------

### Run All Tests

Source: https://github.com/michalsnik/aos/blob/next/CONTRIBUTING.md

Execute all project tests. Ensure all tests pass before creating a Pull Request.

```bash
yarn test
```

--------------------------------

### Get AOS Version

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/SUMMARY.txt

Retrieve the current version of the AOS library. This can be useful for debugging or compatibility checks.

```javascript
import AOS from 'aos';

console.log(AOS.version);
```

--------------------------------

### Use Standard Initialization Trigger Events

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Demonstrates setting the `startEvent` option to standard DOM events. 'DOMContentLoaded' (the default) fires when the HTML document has been completely loaded and parsed, while 'load' waits for all resources like images and stylesheets to finish loading.

```javascript
// Wait for page fully loaded (default)
AOS.init({ startEvent: 'DOMContentLoaded' });

// Wait for all resources
AOS.init({ startEvent: 'load' });
```

--------------------------------

### Initialize AOS with Global Configuration

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Set global defaults for AOS animations by passing a configuration object to `AOS.init()`. This includes options for offset, delay, duration, easing, and more.

```javascript
import AOS from 'aos';

AOS.init({
  offset: 120,
  delay: 0,
  duration: 400,
  easing: 'ease',
  once: false,
  mirror: false,
  anchorPlacement: 'top-bottom',
  startEvent: 'DOMContentLoaded',
  animatedClassName: 'aos-animate',
  initClassName: 'aos-init',
  useClassNames: false,
  disableMutationObserver: false,
  throttleDelay: 99,
  debounceDelay: 50
});
```

--------------------------------

### Initialize AOS

Source: https://github.com/michalsnik/aos/blob/next/demo/anchor.html

Standard initialization for AOS. This should be called after the DOM is loaded.

```javascript
if (!window.Cypress) AOS.init();
```

--------------------------------

### Fade Animations CSS

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/animations.md

CSS implementation for fade animations. Controls opacity and transform properties. Elements start with opacity 0 and transition to opacity 1.

```css
[data-aos^='fade'][data-aos^='fade'] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos^='fade'][data-aos^='fade'].aos-animate {
  opacity: 1;
  transform: none;
}

[data-aos='fade-up'] {
  transform: translate3d(0, 100px, 0);
}
```

--------------------------------

### Custom CSS Easing for AOS

Source: https://github.com/michalsnik/aos/blob/next/README.md

Define custom CSS easing functions for AOS animations. This example sets a specific cubic-bezier timing function for elements with 'new-easing'.

```css
[data-aos] {
  body[data-aos-easing="new-easing"] &,
  &[data-aos][data-aos-easing="new-easing"] {
    transition-timing-function: cubic-bezier(.250, .250, .750, .750);
  }
}
```

--------------------------------

### Custom CSS Animation for AOS

Source: https://github.com/michalsnik/aos/blob/next/README.md

Define custom CSS animations for AOS elements. This example creates a 'new-animation' that affects opacity and transform based on screen width.

```css
[data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;

  &.aos-animate {
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
      transform: translateX(0);
    }
  }
}
```

--------------------------------

### Custom AOS Configuration

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/INDEX.md

Initialize AOS with custom animation duration and easing.

```javascript
AOS.init({ duration: 800, easing: 'ease-in-out' });
```

--------------------------------

### AOS.init()

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/aos-main-api.md

Initializes the AOS library and sets up scroll event listeners. It merges provided settings with default options and scans the DOM for elements with the `data-aos` attribute to apply animations.

```APIDOC
## AOS.init(settings?)

### Description
Initializes the AOS library and sets up scroll event listeners. It merges provided settings with default options and scans the DOM for elements with the `data-aos` attribute to apply animations.

### Method
`init`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **settings** (`AOSSettings`) - Optional - Configuration object to override default options.

### AOSSettings Object
- **offset** (`number`) - Optional - Default: `120` - Offset in pixels from trigger point before animation starts.
- **delay** (`number`) - Optional - Default: `0` - Global delay in milliseconds before animation (increments of 50ms).
- **duration** (`number`) - Optional - Default: `400` - Animation duration in milliseconds (increments of 50ms).
- **easing** (`string`) - Optional - Default: `'ease'` - CSS easing function for animations.
- **disable** (`boolean | string | function`) - Optional - Default: `false` - Disable AOS: `true`, `'phone'`, `'tablet'`, `'mobile'`, or a function returning boolean.
- **once** (`boolean`) - Optional - Default: `false` - Animation triggers only once while scrolling down.
- **mirror** (`boolean`) - Optional - Default: `false` - Elements animate back when scrolling past them.
- **anchorPlacement** (`string`) - Optional - Default: `'top-bottom'` - Position where element's anchor point triggers animation.
- **startEvent** (`string`) - Optional - Default: `'DOMContentLoaded'` - Event name that triggers AOS initialization.
- **animatedClassName** (`string`) - Optional - Default: `'aos-animate'` - Class name added to element when animated.
- **initClassName** (`string`) - Optional - Default: `'aos-init'` - Class name added after AOS initializes.
- **useClassNames** (`boolean`) - Optional - Default: `false` - If true, adds `data-aos` value as classes alongside `animatedClassName`.
- **disableMutationObserver** (`boolean`) - Optional - Default: `false` - Disable automatic detection of DOM mutations.
- **throttleDelay** (`number`) - Optional - Default: `99` - Throttle delay in milliseconds for scroll event handling.
- **debounceDelay** (`number`) - Optional - Default: `50` - Debounce delay in milliseconds for resize/orientation events.

### Return Value
Returns an array of elements with AOS configuration applied. Each element object contains:
```json
{
  "node": Element,
  "position": {
    "in": number,
    "out": number
  },
  "options": {
    "once": boolean,
    "mirror": boolean,
    "animatedClassNames": string[],
    "id": string | undefined
  },
  "animated": boolean
}
```

### Behavior
- Merges provided settings with default options.
- Scans DOM for elements with `data-aos` attribute.
- Sets global attributes on `<body>` for CSS to use.
- Configures MutationObserver to detect new AOS elements if not disabled.
- Checks if AOS should be disabled based on device/conditions.
- Attaches scroll, resize, and orientation change listeners.
- Applies initial animation state.

### Example
```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';

// Initialize with defaults
AOS.init();

// Initialize with custom options
AOS.init({
  duration: 800,
  offset: 200,
  easing: 'ease-in-out',
  once: true,
  mirror: false
});
```

### Error Handling
No errors are thrown. If MutationObserver is not supported, a console message is logged and `disableMutationObserver` is set to true.
```

--------------------------------

### Initialize AOS with Options

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/SUMMARY.txt

Customize AOS behavior by passing an options object to the init method. This allows for fine-grained control over animations.

```javascript
import AOS from 'aos';

AOS.init({
  duration: 800,
  easing: 'ease-in-sine',
  once: true
});
```

--------------------------------

### Get Inline Option Helper

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/observers-and-internals.md

Reads and parses per-element data-aos-* attribute values. Use this helper to retrieve custom options set directly on DOM elements.

```javascript
import getInlineOption from './helpers/getInlineOption';

const element = document.querySelector('[data-aos-duration="800"][data-aos-once="true"]');

getInlineOption(element, 'duration', 400);     // Returns '800' (string)
getInlineOption(element, 'once', false);       // Returns true (boolean)
getInlineOption(element, 'delay', 0);          // Returns 0 (fallback, attribute not set)
getInlineOption(element, 'easing', 'ease');    // Returns 'ease' (fallback)
```

--------------------------------

### Initialize AOS

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/SUMMARY.txt

Call the init method to set up AOS animations on your page. This should be done after the DOM is ready.

```javascript
import AOS from 'aos';

AOS.init();
```

--------------------------------

### Anchor for Fixed Headers

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Use `data-aos-anchor` to account for the offset caused by fixed headers. This example links the animation's trigger point to the position of a fixed header element.

```html
<header style="position: fixed;"></header>

<div 
  data-aos="fade-in"
  data-aos-anchor="header"
  data-aos-anchor-placement="bottom-bottom"
>
  Accounts for fixed header offset
</div>
```

--------------------------------

### Add Custom CSS Duration to AOS

Source: https://github.com/michalsnik/aos/blob/next/README.md

To use durations longer than 3000ms, you can add custom CSS rules. This example shows how to enable a 4000ms duration for AOS elements.

```css
  body[data-aos-duration='4000'] [data-aos],
  [data-aos][data-aos][data-aos-duration='4000'] {
    transition-duration: 4000ms;
  }
```

--------------------------------

### Import AOS and Initialize in JavaScript

Source: https://github.com/michalsnik/aos/blob/next/README.md

Import the AOS library and its CSS, then initialize AOS. This method is suitable for module bundlers like Webpack or Parcel.

```javascript
import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();
```

--------------------------------

### Configure Offset for Animation Trigger

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Adjust the `offset` option to change the distance in pixels from the element's trigger point before the animation starts. This can be set globally or per element.

```javascript
AOS.init({ offset: 200 });
```

```html
<div data-aos="fade-up" data-aos-offset="100">
  Overrides global: triggers 100px before element
</div>
```

--------------------------------

### Per-Element Attribute Overrides

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Shows how per-element data attributes can override global settings for specific elements. The first example uses a specific duration, while the second uses a specific offset.

```html
<!-- Uses: duration=800 (from attribute), offset=120 (from global) -->
<div data-aos="fade-up" data-aos-duration="800">
  Specific duration, default offset
</div>

<!-- Uses: duration=400 (global), offset=200 (from attribute) -->
<div data-aos="fade-up" data-aos-offset="200">
  Default duration, specific offset
</div>

<!-- Uses: duration=400 (global), offset=120 (global) -->
<div data-aos="fade-up">
  All defaults
</div>
```

--------------------------------

### Initialize AOS with Custom Settings

Source: https://github.com/michalsnik/aos/blob/next/README.md

Initialize AOS with a comprehensive set of global and per-element settings. This allows fine-grained control over animation behavior, offsets, durations, and more.

```javascript
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});
```

--------------------------------

### Initialize AOS with Custom Options

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/aos-main-api.md

Initialize AOS with specific custom options by passing a configuration object to the `AOS.init()` method. This allows overriding default values for duration, offset, easing, and more. Ensure AOS CSS is imported.

```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';

// Initialize with custom options
AOS.init({
  duration: 800,
  offset: 200,
  easing: 'ease-in-out',
  once: true,
  mirror: false
});
```

--------------------------------

### Integrate External CSS Animation Library

Source: https://github.com/michalsnik/aos/blob/next/README.md

Configure AOS to use external CSS animation classes. Set 'useClassNames' to true and specify the 'animatedClassName'. This example uses 'animated' and 'fadeInUp'.

```html
<div data-aos="fadeInUp"></div>
```

--------------------------------

### AOS Initialization and Refresh

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/SUMMARY.txt

Methods for initializing and refreshing AOS animations.

```APIDOC
## init(settings?)

### Description
Initializes AOS with optional settings.

### Method
`init(settings?: AOSSettings)`

### Parameters
- **settings** (AOSSettings) - Optional - Configuration object for AOS.

### Request Example
```javascript
AOS.init({
  duration: 2000,
  easing: 'ease-in-out',
  once: true
});
```

## refresh(initialize?)

### Description
Refreshes AOS, reinitializing elements if specified.

### Method
`refresh(initialize?: boolean)`

### Parameters
- **initialize** (boolean) - Optional - If true, AOS will reinitialize.

### Request Example
```javascript
AOS.refresh();
```

## refreshHard()

### Description
Performs a hard refresh of AOS, reinitializing all elements.

### Method
`refreshHard()`

### Request Example
```javascript
AOS.refreshHard();
```
```

--------------------------------

### Anchor Placement for Elements Already in View

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Use `data-aos-anchor-placement` to control when an animation triggers if the element is already visible on page load. This example triggers when the bottom of the element aligns with the center of the viewport.

```html
<div data-aos="fade-up" data-aos-anchor-placement="bottom-center">
  Triggers when bottom is in center of view
</div>
```

--------------------------------

### Detector Methods

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/types.md

The Detector class provides methods to determine the type of device or browser being used. It is exported as a singleton for easy access.

```APIDOC
## Detector Class

Internal device detection class.

### Methods

- **phone()**: `boolean` - Device is a phone.
- **mobile()**: `boolean` - Device is mobile (phone or tablet).
- **tablet()**: `boolean` - Device is a tablet (mobile but not phone).
- **ie11()**: `boolean` - Browser is IE11.

### Usage Example

```javascript
import detect from './helpers/detector';

detect.phone();   // true or false
detect.mobile();  // true or false
detect.tablet();  // true or false
detect.ie11();    // true or false
```
```

--------------------------------

### AOS Initialization Configuration

Source: https://github.com/michalsnik/aos/blob/next/demo/animatecss.html

Initialize AOS with custom configuration options. Use 'useClassNames: true' to enable data-aos attributes, 'initClassName: false' to disable the initial 'aos-init' class, and 'animatedClassName: 'animated'' to specify the class for animating elements.

```javascript
if (!window.Cypress) AOS.init({ useClassNames: true, initClassName: false, animatedClassName: 'animated', });
```

--------------------------------

### AOS Data Attribute Parsing Examples

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/types.md

Illustrates the expected type conversions for common AOS data attributes. Note that numeric strings are not automatically converted to numbers and require explicit conversion by the caller.

```javascript
// data-aos-duration="800"  → '800' (string, caller must Number())
// data-aos-once="true"     → true (boolean)
// data-aos-id="my-id"      → 'my-id' (string)
```

--------------------------------

### Initialize AOS with Mirror Effect

Source: https://github.com/michalsnik/aos/blob/next/demo/index.html

Initializes AOS with the mirror option enabled. This is useful for creating animations that mirror the scroll direction.

```javascript
document.querySelector('html').classList.remove('no-js');
if (!window.Cypress) {
  const scrollCounter = document.querySelector('.js-scroll-counter');
  AOS.init({
    mirror: true
  });
  document.addEventListener('aos:in', function(e) {
    console.log('in!', e.detail);
  });
  window.addEventListener('scroll', function() {
    scrollCounter.innerHTML = window.pageYOffset;
  });
}
```

--------------------------------

### Get Element Trigger Position

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/offset-calculator.md

Calculates the scroll position for an element's animation trigger. Use this when you need to determine the exact scroll point for an element to animate, considering its position, anchor, and offset settings.

```javascript
function getPositionIn(
  el: Element,
  defaultOffset: number,
  defaultAnchorPlacement: string
): number
```

--------------------------------

### Set Anchor Placement via HTML Attribute

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Use the `data-aos-anchor-placement` attribute on an HTML element to specify when its animation should trigger relative to the viewport. This example triggers when the element's top reaches the window's top.

```html
<div data-aos="fade-up" data-aos-anchor-placement="top-top">
  Triggers when element top reaches window top
</div>
```

--------------------------------

### Integrate Offset Calculations in Prepare Function

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/offset-calculator.md

Shows how the `getPositionIn` and `getPositionOut` functions are utilized within the `prepare` helper function during AOS initialization. The calculated 'in' and 'out' positions are stored in an element's `position` object, which is later used by the `handleScroll` function to manage animation states.

```javascript
// From prepare.js
el.position = {
  in: getPositionIn(el.node, options.offset, options.anchorPlacement),
  out: mirror && getPositionOut(el.node, options.offset)
};

```

--------------------------------

### AOS Initialization and Flow Diagram

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/INDEX.md

This diagram illustrates the high-level architecture of the AOS library, showing the flow from HTML elements with data-aos attributes to the final CSS animations triggered by scroll events.

```text
                    ┌─────────────┐
                    │  HTML Page  │
                    │ [data-aos]  │
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐
                    │ AOS.init()  │ ← Start here
                    └──────┬──────┘
                           │
         ┌─────────────────┼─────────────────┐
         │                 │                 │
    ┌────▼───┐        ┌────▼────┐      ┌────▼────┐
    │Elements│        │Position │      │Observer │
    │Query   │        │Calculate│      │Monitor  │
    └────┬───┘        └────┬────┘      └────┬────┘
         │                 │                │
         └─────────────────┼────────────────┘
                           │
                    ┌──────▼──────┐
                    │handleScroll │ ← On scroll
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐
                    │Add/Remove   │
                    │CSS Classes  │
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐
                    │CSS Animate  │
                    │(Transitions)│
                    └─────────────┘
```

--------------------------------

### Initialize and Refresh AOS

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/README.md

Import the default AOS object and use its init, refresh, and refreshHard methods. Ensure AOS is imported as the default export when bundled.

```javascript
import AOS from 'aos';

AOS.init();
AOS.refresh();
AOS.refreshHard();
```

--------------------------------

### Set Anchor Placement for Animation Trigger

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/configuration.md

Configure the `anchorPlacement` option to define which position of an element aligns with which position of the viewport to trigger an animation. This example sets the animation to trigger when the element's center reaches the window's center.

```javascript
AOS.init({ anchorPlacement: 'center-center' });
```

--------------------------------

### Calculate and Log Exit Animation Scroll Position

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/offset-calculator.md

Demonstrates how to use the `getPositionOut` function to find the scroll position where an element's animation should reverse. It then logs this position to the console. This example assumes you have an element with the `data-aos="fade-up"` attribute and a default offset of 120px.

```javascript
import { getPositionOut } from './helpers/offsetCalculator';

const element = document.querySelector('[data-aos="fade-up"]');
const exitPoint = getPositionOut(element, 120);

// Returns scroll position where animation reverses
console.log(`Animation reverses at scroll position: ${exitPoint}px`);

// In scroll handler with mirror enabled:
if (window.pageYOffset >= triggerPoint) {
  // Add animation class
} else if (window.pageYOffset >= exitPoint) {
  // Remove animation class (mirror effect)
}
```

--------------------------------

### Get Exit Animation Scroll Position

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/offset-calculator.md

Calculates the scroll position at which an element's animation should reverse. It considers the element's offset and height, and can use a specified anchor element's offset if provided via `data-aos-anchor`. This is useful for implementing mirror effects where animations play backwards when scrolling past a certain point.

```typescript
function getPositionOut(
  el: Element,
  defaultOffset: number
): number
```

--------------------------------

### AOS Configuration for Gallery/Portfolio

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Use long fade durations and mirrors for an elegant visual effect in galleries or portfolios. Adjust 'duration', 'easing', 'mirror', and 'offset' as needed.

```javascript
AOS.init({
  duration: 600,
  easing: 'ease-out',
  mirror: true,
  offset: 50
});
```

--------------------------------

### Initialize AOS and Add Items Dynamically

Source: https://github.com/michalsnik/aos/blob/next/demo/async.html

Initializes the AOS library and sets up an interval to add new items to the page, triggering scroll animations. This code is intended for use in a browser environment and includes a check to prevent execution during Cypress testing.

```javascript
if (!window.Cypress) { AOS.init(); setInterval(addItem, 150); } else { document.addEventListener('add-aos-item', addItem); }
var itemsCounter = 1;
var container = document.getElementById('aos-demo');

function addItem () {
  if (itemsCounter > 24) return;
  var item = document.createElement('div');
  item.classList.add('aos-item');
  item.setAttribute('data-id', itemsCounter);
  item.setAttribute('data-aos', 'fade-up');
  container.appendChild(item);
  itemsCounter++;
}
```

--------------------------------

### Import and Use offset() Function

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/api-reference/offset-calculator.md

Imports the getOffset function from libs/offset.js and demonstrates its usage to calculate an element's offset relative to the document. This ensures accurate calculations for transformed or nested elements.

```javascript
import getOffset from './../libs/offset';

// Usage:
const elementOffset = getOffset(element);
// Returns: { top: number, left: number }
```

--------------------------------

### AOS Configuration for Dashboard/Data Heavy Sites

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Achieve fast and efficient animations for data-heavy interfaces. Utilize 'duration', 'easing', 'once', 'throttleDelay', and 'debounceDelay'.

```javascript
AOS.init({
  duration: 200,
  easing: 'linear',
  once: true,
  throttleDelay: 200,
  debounceDelay: 100
});
```

--------------------------------

### Semantic HTML with Animations

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Use semantic HTML elements like `<main>` and `<section>` for better accessibility and structure when applying animations. Avoid animating critical content that might be hidden from screen readers during the animation.

```html
<!-- Good: Semantic structure with animations -->
<main>
  <section data-aos="fade-up">
    <h2>Section Title</h2>
    <p>Content</p>
  </section>
</main>

<!-- Avoid: Animation on critical content for blind users -->
<!-- The animation shouldn't hide content from screen readers -->
<div data-aos="fade" style="visibility: hidden;">
  <!-- This is invisible to screen readers during animation -->
</div>
```

--------------------------------

### Import AOS CSS and Lazy Load JS

Source: https://github.com/michalsnik/aos/blob/next/_autodocs/usage-guide.md

Import only the necessary CSS and load the JavaScript dynamically when animations are needed to improve initial load performance.

```javascript
// Good: Only CSS, load JS as needed
import 'aos/dist/aos.css';

// Load JS only when animations needed
if (document.querySelectorAll('[data-aos]').length > 0) {
  import('aos').then(({ default: AOS }) => {
    AOS.init();
  });
}
```