### Install Anime.js via NPM

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedinstallation.md

Installs the Anime.js package using npm, typically used with bundlers like Vite or esbuild. After installation, you can import Anime.js methods as ES6 Modules.

```bash
npm install animejs
```

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

### Import Anime.js as ES6 Module (NPM)

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedinstallation.md

Demonstrates how to import the 'animate' function from Anime.js after installing it via NPM, suitable for use with ES6 module bundlers.

```javascript
import { animate } from 'animejs';
```

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

### Importing Anime.js with Vanilla JS

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-started.md

Demonstrates how to import the Anime.js library using a script tag for use in vanilla JavaScript projects.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
  // Anime.js code here
</script>
```

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

### Import Anime.js as ES6 Module (Local Download)

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedinstallation.md

Demonstrates importing Anime.js as an ES6 module after downloading the 'anime.esm.min.js' file locally. This is useful for projects that manage their own dependencies.

```html
<script type="module">
  import { animate } from './path/to/anime.esm.min.js';
</script>
```

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

### Include Anime.js (Global Object - Local Download)

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedinstallation.md

Includes the Anime.js library locally via a script tag, making it available as a global object. This method is suitable for projects that prefer not to use module bundlers or CDNs.

```html
<script src="path/to/anime.iife.min.js"></script>

<script>
  const { animate } = anime;
</script>
```

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

### Include Anime.js via CDN (Global Object)

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedinstallation.md

Includes Anime.js using a script tag that exposes the library as a global object. This allows access to its functions directly from the global scope, often named 'anime'.

```html
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>

<script>
  const { animate } = anime;
</script>
```

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

### Anime.js ES Module Imports

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedimports.md

Demonstrates how to import specific Anime.js modules using the ES Modules syntax. This is the recommended approach for modern JavaScript projects.

```javascript
import {
  animate,
  createTimeline,
  createTimer,
  // ...other methods
} from 'animejs';
```

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

### Import Anime.js via CDN (ES6 Modules)

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedinstallation.md

Shows how to import Anime.js using an ES6 module script tag, referencing the library from a CDN. This method is useful for direct browser usage without a build process.

```html
<script type="module">
  import { animate } from 'https://cdn.jsdelivr.net/npm/animejs@4.0.0/+esm';
</script>
```

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

### utils.lerp() Usage Examples

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationutilitieslerp.md

Demonstrates the usage of the utils.lerp() function with different 'amount' values to show how it interpolates between a start and end value.

```javascript
utils.lerp(0, 100, 0); // 0
utils.lerp(0, 100, 0.5); // 50
utils.lerp(0, 100, 1); // 100
```

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

### Anime.js Global Object Usage (Script Tag)

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedimports.md

Shows how to include Anime.js globally via a script tag and access its modules through the `anime` object. This method is suitable for projects not using module bundlers.

```html
<script src="path/to/anime.iife.min.js"></script>
```

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

### Anime.js Global Object Access

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedimports.md

Illustrates accessing Anime.js modules directly from the global `anime` object after including it via a script tag. Also shows mimicking ESM import syntax with object destructuring.

```javascript
anime.animate();
anime.createTimeline();
anime.createTimer();
// ...other methods
```

```javascript
const {
  animate,
  createTimeline,
  createTimer,
  // ...other methods
} = anime;
```

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

### anime.js utils.get() Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationutilitiesget.md

Demonstrates how to use utils.get() to retrieve property values from targets. It shows examples of getting raw values, converting units (e.g., 'px' to 'rem'), and removing units to get a numerical value. The example uses anime.js animation to update these values.

```javascript
import { animate, utils } from 'animejs';

const [ $raw, $rem, $num ] = utils.$('.value');
const [ $sq1, $sq2, $sq3 ] = utils.$('.square');

const getValues = () => {
  // Return the raw parsed value (string with px)
  $raw.textContent = utils.get($sq1, 'x');
  // Return the converted value with unit (string with rem)
  $rem.textContent = utils.get($sq2, 'x', 'rem');
  // Return the raw value with its unit removed (number)
  $num.textContent = utils.get($sq3, 'x', false);
}

animate('.square', {
  x: 270,
  loop: true,
  alternate: true,
  onUpdate: getValues
});
```

```html
<div class="medium row">
  <div class="square"></div>
  <div class="padded label"><span class="raw value"></span></div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label"><span class="rem value"></span></div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label"><span class="num value"></span></div>
</div>
```

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

### Vanilla JS Anime.js Integration and Animation

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedusing-with-vanilla-js.md

Demonstrates how to import Anime.js modules (animate, utils, createSpring) and use them to animate SVG elements. It includes creating a bounce animation loop, making an element draggable, and animating rotation on click.

```javascript
import { animate, utils, createSpring } from 'animejs';

const [ $logo ] = utils.$('.logo.js');
const [ $button ] = utils.$('button');
let rotations = 0;

// Created a bounce animation loop
animate('.logo.js', {
  scale: [
    { to: 1.25, ease: 'inOut(3)', duration: 200 },
    { to: 1, ease: createSpring({ stiffness: 300 }) }
  ],
  loop: true,
  loopDelay: 250,
});

// Make the logo draggable around its center
createDraggable('.logo.js', {
  container: [0, 0, 0, 0],
  releaseEase: createSpring({ stiffness: 200 })
});

// Animate logo rotation on click
const rotateLogo = () => {
  rotations++;
  $button.innerText = `rotations: ${rotations}`;
  animate($logo, {
    rotate: rotations * 360,
    ease: 'out(4)',
    duration: 1500,
  });
}

$button.addEventListener('click', rotateLogo);
```

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

### Anime.js Timer Configuration Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimer.md

An example showcasing the configuration of an Anime.js timer with playback settings like duration, loop, and frame rate, along with callback functions for `onUpdate` and `onLoop` events. This example updates DOM elements to display the current time and iteration count.

```javascript
import { animate } from 'animejs';

const [ $time, $count ] = utils.$('.value');

createTimer({
  duration: 1000,
  loop: true,
  frameRate: 30,
  onUpdate: self => $time.innerHTML = self.currentTime,
  onLoop: self => $count.innerHTML = self._currentIteration
});

// HTML structure for the example:
/*
<div class="large centered row">
  <div class="half col">
    <pre class="large log row">
      <span class="label">current time</span>
      <span class="value lcd">0</span>
    </pre>
  </div>
  <div class="half col">
    <pre class="large log row">
      <span class="label">callback fired</span>
      <span class="value lcd">0</span>
    </pre>
  </div>
</div>
*/
```

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

### Anime.js Stagger Start Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationstaggerstagger-parametersstagger-start.md

Demonstrates how to use the 'start' parameter with the stagger function in Anime.js to offset animation values. The 'start' value is added to the calculated staggered value, affecting properties like 'x' and 'delay'.

```javascript
import { animate, stagger } from 'animejs';

animate('.square', {
  x: stagger('1rem', { start: 14 }), // adds 11 to the staggered value
  delay: stagger(100, { start: 500 }), // adds 500 to the staggered value
});
```

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

### HTML Structure for WAAPI Examples

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationweb-animation-apiimprovements-to-the-web-animation-apidefault-units.md

Provides the basic HTML structure used in the examples to apply animations to elements with the class 'square'.

```html
<div class="small row">
  <div class="square"></div>
</div>
<div class="small row">
  <div class="square"></div>
</div>
<div class="small row">
  <div class="square"></div>
</div>
<div class="small row">
  <div class="square"></div>
</div>
```

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

### Timeline Creation Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimelinetimeline-properties.md

An example demonstrating how to create a timeline with specified parameters using Anime.js.

```javascript
const timeline = createTimeline(parameters);
```

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

### HTML Structure for anime.js utils.set() Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationutilitiesset.md

The HTML structure required for the anime.js utils.set() example, including target elements (.square) and control buttons.

```html
<div class="large justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>Set styles</button>
    <button disabled>Revert styles</button>
  </fieldset>
</div>
```

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

### HTML Structure for anime.js Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationanimationanimation-methodscomplete.md

The HTML structure required for the anime.js 'complete' method example, including elements to be animated and a button to trigger the completion.

```html
<div class="medium row">
  <div class="square"></div>
</div>
<div class="medium row">
  <div class="square"></div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button complete">Complete</button>
  </fieldset>
</div>
```

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

### Timer with Callback Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimertimer-callbacksthen.md

A complete example demonstrating the use of createTimer with onUpdate and then() callbacks to update UI elements based on timer progress and completion.

```javascript
import { createTimer, utils } from 'animejs';

const [ $status ] = utils.$('.status');
const [ $time ] = utils.$('.time');

createTimer({
  duration: 2000,
  onUpdate: self => $time.innerHTML = self.currentTime,
})
.then(() => $status.innerHTML = 'fulfilled');
```

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

### HTML Structure for Timer Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimertimer-callbacksthen.md

The HTML structure required for the Timer with Callback Example, including elements to display the timer status and current time.

```html
<div class="large row">
  <div class="col">
    <pre class="large log row">
      <span class="label">promise status</span>
      <span class="status value">pending</span>
    </pre>
  </div>
  <div class="col">
    <pre class="large log row">
      <span class="label">current time</span>
      <span class="time value lcd">0</span>
    </pre>
  </div>
</div>
```

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

### HTML Structure for Animation Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationanimationanimation-callbacksonbegin.md

The HTML structure required for the anime.js onBegin callback example, including elements for displaying animation status.

```html
<div class="large row">
  <div class="circle"></div>
  <pre class="large log row">
    <span class="label">began</span>
    <span class="value">false</span>
  </pre>
</div>
```

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

### JavaScript Example: Stopping a Draggable Animation

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationdraggabledraggable-methodsstop.md

This example demonstrates how to use the `stop()` method to halt animations on a draggable element. It imports necessary functions from anime.js, creates a draggable instance, starts an animation, and then uses a button to call the `stop()` method.

```javascript
import { createDraggable, animate, utils } from 'animejs';

const [ $stopButton ] = utils.$('.stop');

const draggable = createDraggable('.square');

animate(draggable, {
  x: [-100, 100],
  alternate: true,
  loop: true
});

const stopDraggable = () => draggable.stop();

$stopButton.addEventListener('click', stopDraggable);
```

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

### ScrollObserver Debug Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationscrollscrollobserver-settingsdebug.md

This example demonstrates how to use the 'debug' option within the ScrollObserver settings in anime.js. When set to true, it displays markers to visualize the enter and leave thresholds. Each ScrollObserver instance gets a unique color, with the left ruler side showing container thresholds and the right side showing target thresholds.

```javascript
import { animate, onScroll } from 'animejs';

animate('.square', {
  x: '15rem',
  rotate: '1turn',
  duration: 2000,
  alternate: true,
  loop: true,
  ease: 'inOutQuad',
  autoplay: onScroll({
    container: '.scroll-container',
    debug: true,
  })
});
```

```html
<div class="scroll-container scroll-y">
  <div class="scroll-content grid square-grid">
    <div class="scroll-section padded">
      <div class="large centered row">
        <div class="label">scroll down</div>
      </div>
    </div>
    <div class="scroll-section padded">
      <div class="large row">
        <div class="square"></div>
      </div>
    </div>
    <div class="scroll-section padded">
      <div class="large centered row">
        <div class="label">scroll up</div>
      </div>
    </div>
  </div>
</div>
```

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

### HTML Structure for Sync Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationutilitiessync.md

This HTML structure provides the necessary elements for the Anime.js `utils.sync` example, including a circle element to be animated, a display for the speed value, and a range input to control the animation's playback speed.

```html
<div class="large row">
  <div class="circle"></div>
  <pre class="large log row">
    <span class="label">speed</span>
    <span class="speed value">1.00</span>
  </pre>
</div>
<div class="medium row">
  <fieldset class="controls">
    <input type="range" min=0 max=5 value=1 step=.01 class="range" />
  </fieldset>
</div>
```

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

### JavaScript padStart Utility

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationutilitiespad-start.md

Demonstrates the usage of the utils.padStart function in anime.js. It shows how to pad a value directly and how to create a reusable padding function. It also illustrates chaining with utils.round.

```javascript
const paddedValue = utils.padStart(value, totalLength, padString);
const padderFunction = utils.padStart(totalLength, padString);

// Example of creating a reusable padding function
const padTo5WithZeros = utils.padStart(5, '0');
padTo5WithZeros('123');  // '00123'
padTo5WithZeros(78);     // '00078'
padTo5WithZeros('1234'); // '01234'

// Example of chaining with utils.round
const roundAndPad = utils.round(2).padStart(5, '0'); // Round to 2 decimal places then pad to 5 characters
roundAndPad(12.345);  // '12.35'
roundAndPad(7.8);     // '07.80'
```

```javascript
import { animate, utils } from 'animejs';

animate('.value', {
  innerHTML: 10000,
  modifier: utils.round(0).padStart(6, '-'),
  duration: 100000,
  ease: 'linear',
});
```

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

### WAAPI Animation Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationweb-animation-apihardware-accelerated-animations.md

Demonstrates creating a hardware-accelerated animation using Anime.js's WAAPI integration. This animation targets elements with the class '.waapi.square', applying translations and rotations that can be offloaded to the compositor thread for smoother performance.

```javascript
import { animate, waapi, createTimer, utils } from 'animejs';

const [ $block ] = utils.$('.button');

const waapiAnim = waapi.animate('.waapi.square', {
  translate: 270,
  rotate: 180,
  alternate: true,
  loop: true,
  ease: 'cubicBezier(0, 0, .58, 1)',
});
```

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

### Timer Alternate Method Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimertimer-methodsalternate.md

Demonstrates how to use the `alternate()` method of an anime.js timer. This function is triggered by a button click, reversing the timer's playback direction. It includes setup for the timer, event listeners, and HTML structure for displaying iteration time and the control button.

```javascript
import { createTimer, utils } from 'animejs';

const [ $alternateButton ] = utils.$('.button');
const [ $iterationTime ] = utils.$('.iteration-time');

const timer = createTimer({
  duration: 10000,
  loop: true,
  onUpdate: self => {
    $iterationTime.innerHTML = self.iterationCurrentTime;
  }
});

const alternateTimer = () => timer.alternate();

$alternateButton.addEventListener('click', alternateTimer);
```

```html
<div class="large centered row">
  <div class="half col">
    <pre class="large log row">
      <span class="label">iteration time</span>
      <span class="iteration-time value lcd">0</span>
    </pre>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Alternate</button>
  </fieldset>
</div>
```

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

### Basic Animation Initialization

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationanimationanimation-methods.md

Example of initializing an animation with Anime.js.

```javascript
const animation = animate(target, parameters);
```

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

### anime.js Timeline Usage Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimelineadd-animations.md

Demonstrates creating a timeline and adding/synchronizing multiple animations with different targets, properties, and playback settings.

```javascript
import { createTimeline, animate } from 'animejs';

const circleAnimation = animate('.circle', {
  x: '15rem'
});

const tl = createTimeline()
.sync(circleAnimation)
.add('.triangle', {
  x: '15rem',
  rotate: '1turn',
  duration: 500,
  alternate: true,
  loop: 2,
})
.add('.square', {
  x: '15rem',
});
```

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

### ScrollObserver Instance Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationscrollscrollobserver-methods.md

Demonstrates how to obtain a ScrollObserver instance and access its methods in JavaScript.

```javascript
const scrollObserver = onScroll(parameters);

// Example usage of methods:
scrollObserver.link();
scrollObserver.refresh();
scrollObserver.revert();
```

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

### Importing Easing Functions

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationweb-animation-apiimprovements-to-the-web-animation-apispring-and-custom-easings.md

Demonstrates how to import various easing functions from the anime.js library, including linear, outExpo, and cubicBezier, as well as the createSpring function.

```javascript
import { eases } from 'animejs';

const { linear, outExpo, cubicBezier } = eases;

import { createSpring } from 'animejs';
```

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

### HTML Structure for Scope Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationscope.md

The HTML structure required for the Anime.js scope example, featuring a container with a 'square' element that will be animated.

```html
<div class="iframe-content resizable">
  <div class="large centered row">
    <div class="col">
      <div class="square"></div>
    </div>
  </div>
</div>
```

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

### HTML Structure for Draggable Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationdraggabledraggable-settingsmaxvelocity.md

Provides the HTML structure required for the Anime.js draggable example, including container and draggable elements.

```html
<div class="large centered grid square-grid">
  <div class="square draggable"></div>
  <div class="circle draggable"></div>
</div>
```

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

### HTML Structure for Draggable Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationdraggabledraggable-axes-parameterssnap.md

Provides the HTML structure required for the anime.js draggable example, including a container and a draggable element.

```html
<div class="large grid square-grid">
  <div class="square draggable"></div>
</div>
```

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

### Importing the Anime.js Engine

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationengine.md

Demonstrates how to import the engine instance from the animejs library. This is the primary way to access the engine's functionality.

```javascript
import { engine } from 'animejs';
```

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

### Importing the Engine

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationengineengine-parameters.md

Demonstrates how to import the `engine` function from the animejs library.

```javascript
import { engine } from 'animejs';
```

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

### Advanced Animation Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationanimation.md

An example showcasing advanced animation properties like keyframes with different easing functions, function-based delays, and looping.

```javascript
import { animate } from 'animejs';

animate('span', {
  // Property keyframes
  y: [
    { to: '-2.75rem', ease: 'outExpo', duration: 600 },
    { to: 0, ease: 'outBounce', duration: 800, delay: 100 }
  ],
  // Property specific parameters
  rotate: {
    from: '-1turn',
    delay: 0
  },
  delay: (_, i) => i * 50, // Function based value
  ease: 'inOutCirc',
  loopDelay: 1000,
  loop: true
});
```

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

### HTML Structure for Timeline Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimelinetimeline-callbacksonbegin.md

Provides the HTML structure for the Anime.js timeline example, including divs for .circle, .triangle, and .square, and a pre element to display the 'began' status.

```html
<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
  <pre class="large log row">
    <span class="label">began</span>
    <span class="value">false</span>
  </pre>
</div>
```

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

### HTML Structure for Anime.js Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimelinesync-timelines.md

The HTML structure required for the Anime.js timeline synchronization example, containing elements for a circle, triangle, and square.

```html
<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>
```

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

### Syntax Comparison: Iterations/Loop

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationweb-animation-apiapi-differences-with-native-waapiiterations.md

Demonstrates the equivalent syntax for setting animation repetition in both anime.js and the native Web Animation API.

```javascript
Anime.js:
waapi.animate('.square', {
  x: 100,
  loop: 3
});

WAAPI equivalent:
const targets = document.querySelectorAll('.square');

targets.forEach(($el, i) => {
  $el.animate({
    translate: '100px',
  }, {
    fill: 'forwards',
    duration: 1000,
    iterations: 4
  })
});
```

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

### HTML Structure for Draggable Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationdraggabledraggable-methodsstop.md

The HTML structure required for the JavaScript example, including a draggable square and a button to trigger the stop functionality.

```html
<div class="large centered row">
  <div class="square draggable"></div>
</div>
<div class="large row">
  <fieldset class="controls">
    <button class="button stop">Stop</button>
  </fieldset>
</div>
```

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

### Keyframes Animation Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationanimationkeyframestween-parameters-keyframes.md

Demonstrates how to use keyframes to animate multiple properties (x, y, scale, rotate) with individual duration, delay, and easing for each keyframe. The example also shows how to set global animation duration, ease, playbackEase, and loop.

```javascript
import { animate } from 'animejs';

animate('.square', {
  x: [
    { to: '17rem', duration: 700, delay: 400 },
    { to: 0, duration: 700, delay: 800 },
  ],
  y: [
    { to: '-2.5rem', ease: 'out', duration: 400 },
    { to: '2.5rem', duration: 800, delay: 700 },
    { to: 0, ease: 'in', duration: 400, delay: 700 },
  ],
  scale: [
    { to: .5, duration: 700, delay: 400 },
    { to: 1, duration: 700, delay: 800 },
  ],
  rotate: { to: 360, ease: 'linear' },
  duration: 3000,
  ease: 'inOut', 
  playbackEase: 'ouIn(5)', 
  loop: true,
});
```

```html
<div class="medium row">
  <div class="square"></div>
</div>
```

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

### HTML Structure for Animatable Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationanimatableanimatable-settingsduration.md

The HTML structure required for the anime.js animatable duration example, including divs for circles and a label.

```html
<div class="medium centered row">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
<div class="small centered row">
  <span class="label"><br><br><br>Move cursor around</span>
</div>
```

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

### JavaScript Animation Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationweb-animation-apihardware-accelerated-animations.md

Illustrates a standard animation using Anime.js for comparison with WAAPI. This animation targets elements with the class '.js.square' and uses properties like 'x' and 'rotate', running on the main thread.

```javascript
const jsAnim = animate('.js.square', {
  x: 270,
  rotate: 180,
  ease: 'cubicBezier(0, 0, .58, 1)',
  alternate: true,
  loop: true,
});
```

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

### HTML Structure for Animatable Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationanimatable.md

The HTML structure required for the mouse movement example. It includes a container for demos, an active demo element, a square element to be animated, and a label indicating user interaction.

```html
<div class="large centered row">
  <div class="col">
    <div class="square"></div>
  </div>
</div>
<div class="small centered row">
  <span class="label">Move cursor around</span>
</div>
```

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

### Timeline Usage Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationtimeline.md

An example showcasing the creation of a timeline with default duration and adding various elements like labels and animations with specific time positions.

```javascript
import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 750 } });

tl.label('start')
  .add('.square', { x: '15rem' }, 500)
  .add('.circle', { x: '15rem' }, 'start')
  .add('.triangle', { x: '15rem', rotate: '1turn' }, '<-=500');
```

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

### React Integration with Anime.js

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationgetting-startedusing-with-react.md

Demonstrates using Anime.js within a React component. It utilizes `useEffect` to initialize animations and `createScope` to manage them, ensuring proper cleanup with `revert()`. The example includes creating a looping bounce animation, a draggable element, and a custom `rotateLogo` method, all scoped to a React component's root element.

```javascript
import { animate, createScope, createSpring, createDraggable } from 'animejs';
import { useEffect, useRef, useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';

function App() {
  const root = useRef(null);
  const scope = useRef(null);
  const [ rotations, setRotations ] = useState(0);

  useEffect(() => {
  
    scope.current = createScope({ root }).add( scope => {
    
      // Every anime.js instances declared here are now scopped to <div ref={root}>

      // Created a bounce animation loop
      animate('.logo', {
        scale: [
          { to: 1.25, ease: 'inOut(3)', duration: 200 },
          { to: 1, ease: createSpring({ stiffness: 300 }) }
        ],
        loop: true,
        loopDelay: 250,
      });
      
      // Make the logo draggable around its center
      createDraggable('.logo', {
        container: [0, 0, 0, 0],
        releaseEase: createSpring({ stiffness: 200 })
      });

      // Register function methods to be used outside the useEffect
      scope.add('rotateLogo', (i) => {
        animate('.logo', {
          rotate: i * 360,
          ease: 'out(4)',
          duration: 1500,
        });
      });

    });

    // Properly cleanup all anime.js instances declared inside the scope
    return () => scope.current.revert()

  }, []);

  const handleClick = () => {
    const i = rotations + 1;
    setRotations(i);
    // Animate logo rotation on click using the method declared inside the scope
    scope.current.methods.rotateLogo(i);
  };

  return (
    <div ref={root}>
      <div className="large centered row">
        <img src={reactLogo} className="logo react" alt="React logo" />
      </div>
      <div className="medium row">
        <fieldset className="controls">
        <button onClick={handleClick}>rotations: {rotations}</button>
        </fieldset>
      </div>
    </div>
  )
}

export default App;
```

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

### HTML Structure for ScrollObserver Example

Source: https://github.com/ogyeet10/animejs-docs/blob/master/documentationscrollscrollobserver-methodslink.md

The HTML structure required for the ScrollObserver link() method example, including scrollable containers and elements that trigger animations.

```html
<div class="scroll-container scroll-y">
  <div class="scroll-content grid square-grid">
    <div class="scroll-section padded">
      <div class="large row">
        <div class="label">scroll down</div>
      </div>
    </div>
    <div class="scroll-section padded">
      <div class="large row">
        <div class="square"></div>
      </div>
    </div>
    <div class="scroll-section">
    </div>
  </div>
</div>
```