animejs.com/documentation

Created by:
****ad@vlad.studio
Starting URLs:
https://animejs.com/documentation
## Page: https://animejs.com/documentation

## This documentation is only made possible with the help of my sponsors

Anime.js is developed and maintained with the generous support of my sponsors. If you're using Anime.js, a monthly contribution would be highly valuable.

## Platinum sponsors

---

## Page: https://animejs.com/documentation/getting-started

This section covers how to download, install and import Anime.js in your project.

---

## Page: https://animejs.com/documentation/getting-started/installation

Anime.js can be installed in multiple ways depending of your environment or workflow.  
This section covers differents methods of installation.

## Installation via NPM and a bundler

If you're using a bundler like Vite or esbuild, simply install the package via NPM.

    npm install animejs

Then import _Anime.js_ methods as **ES6 Modules** like this:

    import { animate } from 'animejs';

## Linking from a CDN

Anime.js is available from the following CDNs:

| CDN Name | URL |
| --- | --- |
| JsDelivr | jsdelivr.com |
| CDNJS | cdnjs.com |

### ES6 Modules

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

### Global object

    <script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>
    
    <script>
      const { animate } = anime;
    </script>

## Direct download from GitHub

If you prefer to download the Anime.js library manually, you can also simply grab the code from the official GitHub repository: github.com/juliangarnier/anime.

The following versions are available in the `/lib` directory:

| File name | Type |
| --- | --- |
| `anime.esm.js` | ES6 Module |
| `anime.umd.js` | Universal Module |
| `anime.iife.js` | Global object |
| `anime.iife.es5.js` | Global object ES5 |

Once downloaded inside your project folder, link the library in your code like this:

### ES6 Modules

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

### UMD Modules

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

### Global object

    <script src="path/to/anime.iife.min.js"></script>
    
    <script>
      const { animate } = anime;
    </script>

---

## Page: https://animejs.com/documentation/getting-started/imports

Anime.js v4 API exposes the following modules:

## Import methods

### ES Modules

To import _Anime.js_ using the ES Modules syntax, you can use the `import` statement as shown below:

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

### Global object

You can define _Anime.js_ globally using a script tag like this:

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

Then access all the modules directly from `anime` object:

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

Or you can mimic the ESM import syntax by using the object destructuring syntax like this:

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

---

## Page: https://animejs.com/documentation/getting-started/using-with-vanilla-js

Using Anime.js in vanilla JavaScript is pretty straightforward, simply import the modules you need and start animating.

The following example showcase how to uses Anime.js methods with a vanilla JS code base.

## Using with vanilla JS code example

    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);

    <div class="large centered row">
      <svg class="logo js" preserveAspectRatio="xMidYMid meet" viewBox="0 0 630 630"><path fill="currentColor" d="M577,0 C606.271092,0 630,23.7289083 630,53 L630,577 C630,606.271092 606.271092,630 577,630 L53,630 C23.7289083,630 0,606.271092 0,577 L0,53 C0,23.7289083 23.7289083,0 53,0 L577,0 Z M479.5,285.89 C426.63,285.89 392.8,319.69 392.8,364.09 C392.8,411.808 420.615238,434.63146 462.622716,452.742599 L478.7,459.64 L483.441157,461.719734 C507.57404,472.359996 521.8,479.858 521.8,498.94 C521.8,515.88 506.13,528.14 481.6,528.14 C452.4,528.14 435.89,512.91 423.2,492.19 L375.09,520.14 C392.47,554.48 427.99,580.68 482.97,580.68 C539.2,580.68 581.07,551.48 581.07,498.18 C581.07,448.74 552.67,426.75 502.37,405.18 L487.57,398.84 L485.322788,397.859899 C461.5199,387.399087 451.17,380.1172 451.17,362.89 C451.17,348.52 462.16,337.52 479.5,337.52 C496.5,337.52 507.45,344.69 517.6,362.89 L563.7,333.29 C544.2,298.99 517.14,285.89 479.5,285.89 Z M343.09,289.27 L283.89,289.27 L283.89,490.57 C283.89,520.16 271.62,527.77 252.17,527.77 C231.83,527.77 223.37,513.82 214.07,497.32 L165.88,526.495 C179.84,556.04 207.29,580.57 254.69,580.57 C307.15,580.57 343.09,552.67 343.09,491.37 L343.09,289.27 Z"/></svg>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button>rotations: 0</button>
      </fieldset>
    </div>

**Previous** **Next**

*   Imports
*   Using with React

---

## Page: https://animejs.com/documentation/getting-started/using-with-react

Anime.js can be used with React by combining React's `useEffect()` and Anime.js `createScope()` methods.

The following example showcase how to uses Anime.js methods straight into React code.

## Using with React code example

    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;

---

## Page: https://animejs.com/documentation/timer

## Timer V4

## Schedules and controls timed function callbacks that can be used as a replacement to `setTimeout()` or `setInterval()`, keeping animations and callbacks in sync.

Timers are created using the `createTimer()` function.

    import { createTimer } from 'animejs';
    
    const timer = createTimer(parameters);

## Parameters

| Name | Accepts |
| --- | --- |
| parameters (opt) | An `Object` of Timer playback settings and Timer callbacks |

## Returns

Timer

## Timer code example

    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
    });

    <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>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings

Timer

Since 4.0.0

Specify the timings and behaviours of a timer.  
Playback settings properties are defined directly in the `createTimer()` parameters `Object`.

    createTimer({
    ┌───────────────────┐
    │ duration: 1000,   │
    │ frameRate: true,  ├─ Playback Settings
    │ loop: true,       │
    └───────────────────┘
      onBegin: () => {},
      onLoop: () => {},
      onUpdate: () => {},
    });

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/delay

Defines the time in milliseconds before the timer starts.

## Accepts

A `Number` equal to or greater than `0`

## Default

`0`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.delay = 500;

## delay code example

    import { createTimer, utils } from 'animejs';
    
    const [ $time ] = utils.$('.time');
    
    createTimer({
      delay: 2000,
      onUpdate: self => $time.innerHTML = self.currentTime
    });

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/duration

Defines the duration in milliseconds of the timer.  
Setting `0` to a duration completes the timer instantly upon play.

## Accepts

A `Number` equal to or greater than `0`

Duration values higher than `1e12` are clamped internally to `1e12` (Or approximatively 32 years).

## Default

`Infinity`

## duration code example

    import { createTimer, utils } from 'animejs';
    
    const [ $time ] = utils.$('.time');
    
    createTimer({
      duration: 2000,
      onUpdate: self => $time.innerHTML = self.currentTime
    });

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/loop

Defines how many times a timer repeats.

## Accepts

| Value | Effect |
| --- | --- |
| `Number` | The number of loops in the range `[0, Infinity]` |
| `Infinity` | Loop indefinitely |
| `true` | Equivalent to `Infinity` |
| `-1` | Equivalent to `Infinity` |

## Default

`0`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.loop = true;

## loop code example

    import { createTimer, utils } from 'animejs';
    
    const [ $loops ] = utils.$('.loops');
    const [ $time ] = utils.$('.time');
    
    let loops = 0;
    
    createTimer({
      loop: true,
      duration: 1000,
      onLoop: () => $loops.innerHTML = ++loops,
      onUpdate: self => $time.innerHTML = self.iterationCurrentTime
    });

    <div class="large centered row">
      <div class="col">
        <pre class="large log row">
          <span class="label">loops count</span>
          <span class="loops value">0</span>
        </pre>
      </div>
      <div class="col">
        <pre class="large log row">
          <span class="label">iteration time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/playback-loopdelay

Defines the delay in milliseconds between loops.

## Accepts

A `Number` equal to or greater than `0`

## Default

`0`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.loopDelay = 500;

## loopDelay code example

    import { createTimer, utils } from 'animejs';
    
    const [ $loops ] = utils.$('.loops');
    const [ $time ] = utils.$('.time');
    
    let loops = 0;
    
    createTimer({
      loop: true,
      loopDelay: 750,
      duration: 250,
      onLoop: () => $loops.innerHTML = ++loops,
      onUpdate: self => $time.innerHTML = utils.clamp(self.iterationCurrentTime, 0, 250)
    });

    <div class="large centered row">
      <div class="col">
        <pre class="large log row">
          <span class="label">loops count</span>
          <span class="loops value">0</span>
        </pre>
      </div>
      <div class="col">
        <pre class="large log row">
          <span class="label">iteration time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/alternate

Defines if the direction of the timer alternates on each iteration when the `loop` is set to `true` or superior to `1`.

## Accepts

`Boolean`

## Default

`false`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.alternate = true;

## alternate code example

    import { animate } from 'animejs';
    
    const [ $loops ] = utils.$('.loops');
    const [ $time ] = utils.$('.time');
    
    let loops = 0;
    
    createTimer({
      loop: true,
      duration: 1000,
      alternate: true,
      onLoop: () => $loops.innerHTML = ++loops,
      onUpdate: self => $time.innerHTML = self.iterationCurrentTime
    });

    <div class="large centered row">
      <div class="col">
        <pre class="large log row">
          <span class="label">loops count</span>
          <span class="loops value">0</span>
        </pre>
      </div>
      <div class="col">
        <pre class="large log row">
          <span class="label">iteration time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/reversed

Sets the initial direction of the timer.  
The timer `currentTime` always progresses from `0` to `duration`.  
Only the `iterationTime` property is actually reversed.

## Accepts

`Boolean`

*   If set to `true` the timer's first iteration runs in reverse
*   If set to `false` the timer's first iteration runs normally

## Default

`false`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.reversed = true;

## reversed code example

    import { animate } from 'animejs';
    
    const [ $iterationTime ] = utils.$('.iteration-time');
    const [ $currentTime ] = utils.$('.current-time');
    
    createTimer({
      duration: 10000,
      reversed: true,
      onUpdate: self => {
        $iterationTime.innerHTML = self.iterationCurrentTime;
        $currentTime.innerHTML = self.currentTime;
      }
    });

    <div class="large centered row">
      <div class="col">
        <pre class="large log row">
          <span class="label">iteration time</span>
          <span class="iteration-time value lcd">0</span>
        </pre>
      </div>
      <div class="col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="current-time value lcd">0</span>
        </pre>
      </div>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/autoplay

Defines the play mode of a timer.

The autoplay parameter has no effect when the timer is added to a timeline, and will be overridden to `false`.

## Accepts

`Boolean` | `onScroll()`

*   If set to `true` the timer plays automatically
*   If set to `false` the timer has to be manually played
*   If set to `onScroll()` the timer will starts when the scroll thresholds conditions are met

## Default

`true`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.autoplay = false;

## autoplay code example

    const [ $time ] = utils.$('.time');
    const [ $playButton ] = utils.$('.play');
    
    const timer = createTimer({
      autoplay: false,
      onUpdate: self => $time.innerHTML = self.currentTime
    });
    
    
    const playTimer = () => timer.play();
    
    $playButton.addEventListener('click', playTimer);

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="play">Play</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/framerate

Determines the frames per second (fps) at which a timer runs.  
This value can be modified later with `timer.fps = 30`.

## Accepts

A `Number` greater than `0`

The frame rate is capped to the monitor refresh rate or in some cases by the browser itself.

## Default

`120`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.frameRate = 30;

## frameRate code example

    import { createTimer, utils } from 'animejs';
    
    const [ $range ] = utils.$('.range');
    const [ $fps ] = utils.$('.fps');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      frameRate: 60,
      onUpdate: self => $time.innerHTML = self.currentTime,
    });
    
    const updateFps = () => {
      const { value } = $range;
      $fps.innerHTML = value;
      timer.fps = value;
    }
    
    $range.addEventListener('input', updateFps);

    <div class="large centered row">
      <div class="col">
        <pre class="large log row">
          <span class="label">fps</span>
          <span class="fps value">60</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>
    <div class="medium row">
      <fieldset class="controls">
        <input type="range" min=0 max=120 value=60 step=1 class="range" />
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-playback-settings/playbackrate

Defines a speed multiplier to speed up or slow down a timer playback (`1.0` is normal speed).  
This value can be modified later with `timer.speed = .5`.

## Accepts

A `Number` greater than or equal to `0`

If set to `0` the timer won't play.

## Default

`1`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.playbackRate = .75;

## playbackRate code example

    import { createTimer, utils } from 'animejs';
    
    const [ $range ] = utils.$('.range');
    const [ $speed ] = utils.$('.speed');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      playbackRate: 2,
      onUpdate: self => $time.innerHTML = utils.round(self.currentTime, 0),
    });
    
    const updateSpeed = () => {
      const speed = utils.roundPad(+$range.value, 1);
      $speed.innerHTML = speed;
      utils.sync(() => timer.speed = speed);
    }
    
    $range.addEventListener('input', updateSpeed);

    <div class="large centered row">
      <div class="col">
        <pre class="large log row">
          <span class="label">speed</span>
          <span class="speed value">2.0</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>
    <div class="medium row">
      <fieldset class="controls">
        <input type="range" min=0 max=10 value=2 step=.1 class="range" />
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-callbacks

Timer

Since 4.0.0

Execute functions at specific points during a timer playback.  
Callbacks `Function` are specified directly in the `createTimer()` parameters `Object`.

    createTimer({
      duration: 1000,
      frameRate: true,
      loop: true,
    ┌─────────────────────┐
    │ onBegin: () => {},  │
    │ onLoop: () => {},   ├─ Callbacks
    │ onUpdate: () => {}, │
    └─────────────────────┘
    });

---

## Page: https://animejs.com/documentation/timer/timer-callbacks/onbegin

Executes a function when a timer starts.

## Accepts

A `Function` whose first argument returns the timer itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onBegin = self => console.log(self.id);

## onBegin code example

    import { createTimer, utils } from 'animejs';
    
    const [ $status ] = utils.$('.status');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      delay: 2000,
      duration: 2000,
      onBegin: self => $status.innerHTML = 'true'
    });
    
    const logTimer = createTimer({
      duration: 4000,
      onUpdate: self => $time.innerHTML = timer.currentTime
    });

    <div class="large row">
      <div class="col">
        <pre class="large log row">
          <span class="label">began</span>
          <span class="status value">false</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>

---

## Page: https://animejs.com/documentation/timer/timer-callbacks/oncomplete

Executes a function when all the iterations (`loop`) of a timer have finished playing.

## Accepts

A `Function` whose first argument returns the timer itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onComplete = self => console.log(self.id);

## onComplete code example

    import { createTimer, utils } from 'animejs';
    
    const [ $status ] = utils.$('.status');
    const [ $time ] = utils.$('.time');
    
    createTimer({
      duration: 2000,
      onComplete: self => $status.innerHTML = 'true',
      onUpdate: self => $time.innerHTML = self.currentTime
    });

    <div class="large row">
      <div class="col">
        <pre class="large log row">
          <span class="label">completed</span>
          <span class="status value">false</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>

---

## Page: https://animejs.com/documentation/timer/timer-callbacks/onupdate

Executes a function on every frames of a running timer at the specified `frameRate`.

## Accepts

A `Function` whose first argument returns the timer itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onUpdate = self => console.log(self.id);

## onUpdate code example

    import { createTimer, utils } from 'animejs';
    
    const [ $updates ] = utils.$('.updates');
    const [ $time ] = utils.$('.time');
    
    let updates = 0;
    
    createTimer({
      onUpdate: self => {
        $updates.innerHTML = ++updates;
        $time.innerHTML = self.currentTime;
      }
    });

    <div class="large row">
      <div class="col">
        <pre class="large log row">
          <span class="label">updates</span>
          <span class="updates value">0</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>

---

## Page: https://animejs.com/documentation/timer/timer-callbacks/onloop

Executes a function every time a timer iteration completes.

## Accepts

A `Function` whose first argument returns the timer itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onLoop = self => console.log(self.id);

## onLoop code example

    import { createTimer, utils } from 'animejs';
    
    const [ $loops ] = utils.$('.loops');
    const [ $time ] = utils.$('.time');
    
    let loops = 0;
    
    createTimer({
      loop: true,
      duration: 1000,
      onLoop: self => $loops.innerHTML = ++loops,
      onUpdate: self => $time.innerHTML = self.iterationCurrentTime,
    });

    <div class="large row">
      <div class="col">
        <pre class="large log row">
          <span class="label">loops</span>
          <span class="loops value">0</span>
        </pre>
      </div>
      <div class="col">
        <pre class="large log row">
          <span class="label">iteration time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-callbacks/onpause

Executes a function when a running timer is paused.

## Accepts

A `Function` whose first argument returns the timer itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onPause = self => console.log(self.id);

## onPause code example

    import { createTimer, utils } from 'animejs';
    
    const [ $resumeButton, $pauseButton ] = utils.$('.button');
    const [ $paused ] = utils.$('.paused');
    const [ $time ] = utils.$('.time');
    
    let paused = 0;
    
    const timer = createTimer({
      onPause: () => $paused.innerHTML = ++paused,
      onUpdate: self => $time.innerHTML = self.currentTime
    });
    
    const pauseTimer = () => timer.pause();
    const resumeTimer = () => timer.resume();
    
    $resumeButton.addEventListener('click', resumeTimer);
    $pauseButton.addEventListener('click', pauseTimer);

    <div class="large row">
      <div class="col">
        <pre class="large log row">
          <span class="label">paused</span>
          <span class="value paused">0</span>
        </pre>
      </div>
      <div class="col">
        <pre class="large log row">
          <span class="label">elapsed time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="button">Resume</button>
        <button class="button">Pause</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-callbacks/then

Returns a `Promise` that resolves and execute a callback when the timer completes.

The `then()` method can be directly inlined like this:

    createTimer({duration: 500}).then(callback);

Or used in an `async` / `await` context:

    async function waitForTimerToComplete() {
      return createTimer({ duration: 250 })
    }
    
    const asyncTimer = await waitForTimerToComplete();

## Parameters

| Name | Type |
| --- | --- |
| callback | A `Function` whose first argument returns the timer itself |

## Returns

`Promise`

## then() code example

    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');

    <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>

**Previous** **Next**

*   onPause
*   Timer methods

---

## Page: https://animejs.com/documentation/timer/timer-methods

Timer

Since 4.0.0

Provide control over the timing, behaviour and progression of a timer.  
Timer methods are available on a Timer instance `Object`.

    const timer = createTimer(parameters);
          ┌──────────┐
    timer.│pause()   │
    timer.│play()    ├─ Methods
    timer.│restart() │
          └──────────┘

---

## Page: https://animejs.com/documentation/timer/timer-methods/play

Forces the timer to play forward.

## Returns

The timer itself

Can be chained with other timer methods.

## play() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $playButton ] = utils.$('.play');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      duration: 2000,
      autoplay: false,
      onUpdate: self => $time.innerHTML = self.iterationCurrentTime,
    });
    
    const playTimer = () => timer.play();
    
    $playButton.addEventListener('click', playTimer);

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

---

## Page: https://animejs.com/documentation/timer/timer-methods/reverse

Forces the timer to play backward.

## Returns

The timer itself

Can be chained with other timer methods.

## reverse() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $reverseButton ] = utils.$('.reverse');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      duration: 2000,
      onUpdate: self => $time.innerHTML = self.iterationCurrentTime,
    });
    
    const reverseTimer = () => timer.reverse();
    
    $reverseButton.addEventListener('click', reverseTimer);

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

---

## Page: https://animejs.com/documentation/timer/timer-methods/pause

Pauses a running timer.

## Returns

The timer itself

Can be chained with other timer methods.

## pause() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $pauseButton ] = utils.$('.pause');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      onUpdate: self => $time.innerHTML = self.currentTime
    });
    
    const pauseTimer = () => timer.pause();
    
    $pauseButton.addEventListener('click', pauseTimer);

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="button pause">Pause</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-methods/restart

Resets all properties and set the `currentTime` of a timer to `0`.

If the `autoplay` is set to `true`, the timer plays automatically.

## Returns

The timer itself

Can be chained with other timer methods.

## restart() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $restartButton ] = utils.$('.restart');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      onUpdate: self => $time.innerHTML = self.currentTime
    });
    
    const restartTimer = () => timer.restart();
    
    $restartButton.addEventListener('click', restartTimer);

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="button restart">Restart</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-methods/alternate

Toggles the playback direction while adjusting the `currentTime` position to reflect the new time progress.

Only the `iterationTime` is actually played in reverse since the `currentTime` always starts at `0` and ends at `duration`.

## Returns

The timer itself

Can be chained with other timer methods.

## alternate() code example

    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);

    <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>

---

## Page: https://animejs.com/documentation/timer/timer-methods/resume

Resumes the playback of a paused timer in its current direction.

## Returns

The timer itself

Can be chained with other timer methods.

## resume() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $resumeButton, $pauseButton, $alternateButton ] = utils.$('.button');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      duration: 2000,
      onUpdate: self => $time.innerHTML = self.iterationCurrentTime,
      loop: true,
    });
    
    const resumeTimer = () => timer.resume();
    const pauseTimer = () => timer.pause();
    const alternateTimer = () => timer.alternate();
    
    $resumeButton.addEventListener('click', resumeTimer);
    $pauseButton.addEventListener('click', pauseTimer);
    $alternateButton.addEventListener('click', alternateTimer);

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

---

## Page: https://animejs.com/documentation/timer/timer-methods/complete

Completes a timer instantly.

## Returns

The timer itself

Can be chained with other timer methods.

## complete() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $completeButton ] = utils.$('.complete');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      duration: 100000,
      onUpdate: self => $time.innerHTML = self.currentTime
    });
    
    const completeTimer = () => timer.complete();
    
    $completeButton.addEventListener('click', completeTimer);

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="button complete">Complete</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-methods/cancel

Pauses the timer, removes it from the engine's main loop, and frees up memory.

## Returns

The timer itself

Can be chained with other timer methods.

## cancel() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $playButton ] = utils.$('.play');
    const [ $cancelButton ] = utils.$('.cancel');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      onUpdate: self => $time.innerHTML = self.currentTime
    });
    
    const playTimer = () => timer.play();
    const cancelTimer = () => timer.cancel();
    
    $playButton.addEventListener('click', playTimer);
    $cancelButton.addEventListener('click', cancelTimer);

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="button play">Play</button>
        <button class="button cancel">Cancel</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-methods/revert

Cancels the timer,sets its `currentTime` to `0` and reverts the linked `onScroll()` instance if necessary.

Use `.revert()` when you want to completely stop and destroy an timer.

## Returns

The timer itself

Can be chained with other timer methods.

## revert() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $playButton ] = utils.$('.play');
    const [ $revertButton ] = utils.$('.revert');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      onUpdate: self => $time.innerHTML = self.currentTime
    });
    
    const playTimer = () => timer.play();
    const revertTimer = () => {
      timer.revert();
      $time.innerHTML = timer.currentTime
    }
    
    $playButton.addEventListener('click', playTimer);
    $revertButton.addEventListener('click', revertTimer);

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="button play">Play</button>
        <button class="button revert">Revert</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-methods/seek

Updates the `currentTime` of the timer and advances it to a specific time.

    timer.seek(time, muteCallbacks);

## Parameters

| Name | Type | Description |
| --- | --- | --- |
| time | `Number` | The new `currentTime` in ms of the timer |
| muteCallbacks=false (opt) | `Boolean` | If `true`, prevent the callbacks from being fired |

## Returns

The timer itself

Can be chained with other timer methods.

## seek() code example

    import { createTimer, utils } from 'animejs';
    
    const [ $range ] = utils.$('.range');
    const [ $playPauseButton ] = utils.$('.play-pause');
    const [ $time ] = utils.$('.time');
    
    const updateButtonLabel = timer => {
      $playPauseButton.textContent = timer.paused ? 'Play' : 'Pause';
    }
    
    const timer = createTimer({
      duration: 2000,
      autoplay: false,
      onUpdate: self => {
        $range.value = self.currentTime;
        $time.innerHTML = self.currentTime;
        updateButtonLabel(self);
      },
      onComplete: updateButtonLabel,
    });
    
    
    const seekTimer = () => timer.seek(+$range.value);
    
    const playPauseTimer = () => {
      if (timer.paused) {
        timer.play();
      } else {
        timer.pause();
        updateButtonLabel(timer);
      }
    }
    
    $range.addEventListener('input', seekTimer);
    $playPauseButton.addEventListener('click', playPauseTimer);

    <div class="large centered row">
      <div class="half col">
        <pre class="large log row">
          <span class="label">current time</span>
          <span class="time value lcd">0</span>
        </pre>
      </div>
    </div>
    <div class="medium centered row">
      <fieldset class="controls">
        <input type="range" min=0 max=2000 value=0 class="range" />
        <button style="flex: 0.25;" class="button play-pause">Play</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-methods/stretch

Changes the total duration of a timer to fit a specific time.  
The total duration is equal to the duration of an iteration multiplied with the total number of iterations. So if a timer has a duration of 1000ms and loops twice (3 iterations in total), the total duration is 3000ms (1000 \* 3).

    timer.stretch(duration);

## Parameters

| Name | Type | Description |
| --- | --- | --- |
| duration | `Number` | The new total duration in ms of the timer |

## Returns

The timer itself

Can be chained with other timer methods.

## stretch() code example

    import { animate, utils } from 'animejs';
    
    const [ $range ] = utils.$('.range');
    const [ $duration ] = utils.$('.duration');
    const [ $time ] = utils.$('.time');
    
    const timer = createTimer({
      duration: 2000,
      onUpdate: self => $time.innerHTML = self.currentTime
    });
    
    const stretchTimer = () => {
      timer.stretch(+$range.value);
      $duration.innerHTML = utils.round(timer.duration, 0);
      timer.restart();
    }
    
    $range.addEventListener('input', stretchTimer);

    <div class="large centered row">
      <div class="col">
        <pre class="large log row">
          <span class="label">duration</span>
          <span class="duration value">2000</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>
    
    <div class="medium row">
      <fieldset class="controls">
        <input type="range" min=0 max=4000 value=2000 step=100 class="range" />
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/timer/timer-properties

    const timer = createTimer(parameters);
          ┌────────────┐
    timer.│progress    │
    timer.│currentTime ├─ Properties
    timer.│duration    │
          └────────────┘

| Name | Description |
| --- | --- |
| id | Gets and sets the ID of the timer (`String` | `Number`) |
| deltaTime | Gets the time in ms elapsed between the current and previous frame (`Number`) |
| currentTime | Gets and sets the global current time in ms of the timer (`Number`) |
| iterationCurrentTime | Gets and sets the current iteration time in ms (`Number`) |
| progress | Gets and sets the overall progress of the timer from `0` to `1` (`Number`) |
| iterationProgress | Gets and sets the progress of the current iteration from `0` to `1` (`Number`) |
| currentIteration | Gets and sets the current iteration count (`Number`). |
| speed | Gets and sets the playbackRate multiplier of the timer (`Number`) |
| fps | Gets and sets the frameRate of the timer (`Number`) |
| paused | Gets and sets whether the timer is paused (`Boolean`) |
| began | Gets and sets whether the timer has started (`Boolean`) |
| completed | Gets and sets whether the timer has completed (`Boolean`) |
| reversed | Gets and sets whether the timer is reversed (`Boolean`) |

---

## Page: https://animejs.com/documentation/animation

## Animates the properties values of targeted elements, with a wide range of parameters, callbacks and methods.

Animations are created using the `animate()` method.

    import { animate } from 'animejs';
    
    const animation = animate(targets, parameters);

## Parameters

| Name | Accepts |
| --- | --- |
| targets | Targets |
| parameters | An `Object` of Animatable properties, Tween parameters, Playback settings and Animation callbacks |

## Returns

JSAnimation

## WAAPI powered animations

Anime.js provides a more lightweight (3KB) version of the `animate()` method (10KB) powered by the Web Animation API.

    import { waapi } from 'animejs';
    
    const animation = waapi.animate(targets, parameters);

The WAAPI version has less features overall, but covers most of the basic API.

Features only available in the JavaScript version are indicated with a (JS) badge and WAAPI specific features are indicated with a (WAAPI) badge

To know more about when to use the WAAPI version and its potential pitfalls, please refer to the Web Animations API Guide.

---

## Page: https://animejs.com/documentation/animation/targets

Animation

Since 4.0.0

Specify the elements to which property value changes are applied.  
Animation targets are defined in the first argument of the `animate()` function.

    animate(
    ┌────────────┐
    │ '.square', ├─ Targets
    └────────────┘
    {
      translateX: 100,
      scale: 2,
      opacity: .5,
      duration: 400,
      delay: 250,
      ease: 'out(3)',
      loop: 3,
      alternate: true,
      autoplay: false,
      onBegin: () => {},
      onLoop: () => {},
      onUpdate: () => {},
    });

---

## Page: https://animejs.com/documentation/animation/targets/css-selector

Targets one or multiple DOM Elements using a CSS selector.

## Accepts

Any `String` accepted by `document.querySelectorAll()`

## CSS Selector code example

    import { animate } from 'animejs';
    
    animate('.square', { x: '17rem' });
    animate('#css-selector-id', { rotate: '1turn' });
    animate('.row:nth-child(3) .square', { scale: [1, .5, 1] });

    <div class="medium row">
      <div class="square"></div>
    </div>
    <div class="medium row">
      <div id="css-selector-id" class="square"></div>
    </div>
    <div class="medium row">
      <div class="square"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/targets/dom-elements

Targets one or multiple DOM Elements.

## Accepts

*   `HTMLElement`
*   `SVGElement`
*   `SVGGeometryElement`
*   `NodeList`

## DOM Elements code example

    import { animate } from 'animejs';
    
    const $demo = document.querySelector('#selector-demo');
    const $squares = $demo.querySelectorAll('.square');
    
    animate($demo, { scale: .75 });
    animate($squares, { x: '23rem' });

    <div id="selector-demo">
      <div class="medium row">
        <div class="square"></div>
      </div>
      <div class="medium row">
        <div class="square"></div>
      </div>
      <div class="medium row">
        <div class="square"></div>
      </div>
    </div>

---

## Page: https://animejs.com/documentation/animation/targets/javascript-objects

Targets one or multiple JavaScript `Object`.

## Accepts

*   `Object`
*   Instance of `Class`

## JavaScript Objects code example

    import { animate, utils } from 'animejs';
    
    const [ $log ] = utils.$('code');
    
    const vector2D = { x: 0, y: 0 };
    
    animate(vector2D, {
      x: 100,
      y: 150,
      modifier: utils.round(0),
      onUpdate: () => $log.textContent = JSON.stringify(vector2D),
    });

    <pre class="row large centered">
      <code>{"x":0,"y":0}</code>
    </pre>

---

## Page: https://animejs.com/documentation/animation/targets/array-of-targets

Targets multiple valid Targets simultaneously by grouping them inside an `Array`.  
Any types of targets can be grouped together

## Accepts

An `Array` of Targets

## Array of targets code example

    import { animate, utils } from 'animejs';
    
    const [ $log ] = utils.$('.demo code');
    
    const vector2D = { x: 0, y: 0 };
    
    animate([vector2D, '.square'], {
      x: '17rem',
      modifier: utils.roundPad(2).padStart(5, '0'),
      onRender: () => $log.textContent = JSON.stringify(vector2D),
    });

    <pre class="row large centered">
      <code>{"x":"0"}</code>
    </pre>
    <div class="row medium">
      <div class="square"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animatable-properties

Animation

Since 1.0.0

Define which properties of the Targets can be animated.  
Animatable properties are defined in the parameters `Object` of the `animate()` function.

    animate('.square', {
    ┌──────────────────┐
    │ translateX: 100, │
    │ scale: 2,        ├─ Animatable Properties
    │ opacity: .5,     │
    └──────────────────┘
      duration: 400,
      delay: 250,
      ease: 'out(3)',
      loop: 3,
      alternate: true,
      autoplay: false,
      onBegin: () => {},
      onLoop: () => {},
      onUpdate: () => {},
    });

---

## Page: https://animejs.com/documentation/animation/animatable-properties/css-properties

Any CSS numerical and color properties can be animated.  
Properties containing a dash in their name, like `background-color`, must be converted to camel case (`backgroundColor`), or written as a `String` (`'background-color'`).

Most CSS properties can cause layout changes or repaint leading to choppy animations. To achieve smoother animations, always prioritise opacity and CSS transforms as much as possible.

## CSS Properties code example

    import { animate } from 'animejs';
    
    animate('.square', {
      left: 'calc(7.75rem * 2)',
      borderRadius: 64,
      'background-color': '#F9F640',
      filter: 'blur(5px)',
    });

    <div class="large row">
      <div class="square"></div>
    </div>

**Previous** **Next**

*   Animatable properties
*   CSS transforms

---

## Page: https://animejs.com/documentation/animation/animatable-properties/css-transforms

The CSS `transform` property can be animated by specifying individual properties directly in the parameter object with both JS and WAAPI `animate()` versions.

This allows a greater level of control over how to animate individual transform properties, giving you more flexibility than CSS animations or native WAAPI.

The JS `animate()` method doesn't parse transforms declared from a CSS style declaration and transforms properties must be set directly in the inline styles of the element. You can use the built-in `utils.set()` function to independently set your transform values before animating an element and define in which order they must be set.

In order to animate the `transform` property directly, it's recommended to use the WAAPI powered `waapi.animate()` method.

## Valid individual CSS transforms properties

| Name | Shorthand | Default Value | Default Unit |
| --- | --- | --- | --- |
| translateX | x | `'0px'` | `'px'` |
| translateY | y | `'0px'` | `'px'` |
| translateZ | z | `'0px'` | `'px'` |
| rotate | — | `'0deg'` | `'deg'` |
| rotateX | — | `'0deg'` | `'deg'` |
| rotateY | — | `'0deg'` | `'deg'` |
| rotateZ | — | `'0deg'` | `'deg'` |
| scale | — | `'1'` | — |
| scaleX | — | `'1'` | — |
| scaleY | — | `'1'` | — |
| scaleZ | — | `'1'` | — |
| skew | — | `'0deg'` | `'deg'` |
| skewX | — | `'0deg'` | `'deg'` |
| skewY | — | `'0deg'` | `'deg'` |
| perspective | — | `'0px'` | `'px'` |

---

## Page: https://animejs.com/documentation/animation/animatable-properties/css-variables

## CSS Variables V4 JS

CSS variables with numerical or color values can be animated by directly passing the variable name as a string to the animation parameters.  
This approach also enables animation of properties defined on pseudo-elements like `::after` and `::before`, which are otherwise inaccessible via JavaScript.

In order to animate CSS variables properties with the WAAPI powered `waapi.animate()` method, you need to use `CSS.registerProperty(propertyDefinition)`, otherwise it falls back to no animations.

## CSS Variables code example

    import { animate, utils } from 'animejs';
    
    // Set the CSS variables as properties on the animated elements
    utils.set('.square', {
      '--radius': '4px',
      '--x': '0rem',
      '--pseudo-el-after-scale': '1', // applied to the pseudo element "::after"
      borderRadius: 'var(--radius)',
      translateX: 'var(--x)',
    });
    
    // Animate the values of the CSS variables
    animate('.square', {
      '--radius': '20px',
      '--x': '16.5rem',
      '--pseudo-el-after-scale': '1.55' // Animates the ":after" pseudo element of the element
    });

    <div class="medium row">
      <div class="css-variables square"></div>
    </div>
    <div class="medium row">
      <div class="css-variables square"></div>
    </div>
    <div class="medium row">
      <div class="css-variables square"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animatable-properties/javascript-object-properties

Numerical and color JavaScript `Object` properties can be passed directly to the animation parameters.

## JavaScript Object properties code example

    import { animate, utils } from 'animejs';
    
    const myObject = {
      number: 1337,
      unit: '42%',
    }
    
    const [ $log ] = utils.$('code');
    
    animate(myObject, {
      number: 50,
      unit: '100%',
      modifier: utils.round(0),
      onRender: function() {
        $log.innerHTML = JSON.stringify(myObject);
      }
    });

    <pre class="row large centered">
      <code>{"number":1337,"unit":"42%"}</code>
    </pre>

**Previous** **Next**

*   CSS Variables
*   HTML Attributes

---

## Page: https://animejs.com/documentation/animation/animatable-properties/html-attributes

Numerical and color HTML attributes can be passed directly to the animation parameters.

## HTML Attributes code example

    import { animate, utils } from 'animejs';
    
    animate('input', {
      value: 1000, // animate the input "value" attribute
      alternate: true,
      loop: true,
      modifier: utils.round(0),
    });

    <pre class="row large centered">
      <input type="range" value="0" min="0" max="1000" />
      <input type="text" value="0" size="5"/>
    </pre>

---

## Page: https://animejs.com/documentation/animation/animatable-properties/svg-attributes

Numerical and color SVG attributes can be animated by passing them directly to the animation parameters.

For more convenient SVG animations, check out the built-in SVG utility methods.

## SVG Attributes code example

    import { animate } from 'animejs';
    
    animate(['feTurbulence', 'feDisplacementMap'], {
      baseFrequency: .05,
      scale: 15,
      alternate: true,
      loop: true
    });
    
    animate('polygon', {
      points: '64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100',
      alternate: true,
      loop: true
    });

    <div class="large centered row">
    <svg width="128" height="128" viewBox="0 0 128 128">
      <filter id="displacementFilter">
        <feTurbulence type="turbulence" numOctaves="2" baseFrequency="0" result="turbulence"/>
        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"/>
      </filter>
      <polygon points="64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96"  fill="currentColor"/>
    </svg>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-value-types

Animation

Since 1.0.0

Specify the _start_ and _end_ values that define the animation of animatable properties.  
Animation values are assigned to Animatable properties and accept a wide range of syntaxes.

    animate('.square', {
      x: '6rem', ─────────────────┐
      y: $el => $el.dataset.y, ───┤
      scale: '+=.25', ────────────┼─ Tween Values
      opacity: {                  │
        from: .4, ────────────────┘
      },
    });

---

## Page: https://animejs.com/documentation/animation/tween-value-types/numerical-value

Specifies the numerical value of the animated property by passing either a `Number` or a `String` containing at least one `Number`.

If no unit is specified for properties that expect a unit, like `width` for example, the resulting animation will use the default browser unit.

    animate(target, { width: 100 }); // Defaults to px

## Accepts

*   `Number`
*   `String`

If a specific unit is already specified, the JS `animate()` method can inherits previously defined units and the next value set without a unit on the same target property inherits the previously defined unit.

    animate(target, { width: '50%' }); // Uses '%'
    animate(target, { width: 75 });    // Inherits '%' -> '75%'

The WAAPI `animate()` method only falls back automatically to `'px'` with the following properties:

    - x / translateX
    - y / translateY
    - z / translateZ
    - perspective
    - top
    - right
    - bottom
    - left
    - width
    - height
    - margin
    - padding
    - borderWidth
    - borderRadius
    - fontSize

---

## Page: https://animejs.com/documentation/animation/tween-value-types/unit-conversion-value

Converts and animates to a value with a different unit than the default or currently used one.

When using the JS `animate()` method, unit conversions may sometimes produce unexpected results depending on the unit type and animated properties used.  
For more predictable results, it's recommended to define the unit outside of the animation using `utils.set()`, and then animate to the current unit.

Or simply use the WAAPI `animate()` method.

## Accepts

`String`

## Unit conversion value code example

    import { animate, utils } from 'animejs';
    
    animate('.square', {
      width: '25%', // from '48px' to '25%',
      x: '15rem', // from '0px' to '15rem',
      rotate: '.75turn', // from `0deg` to '.75turn',
    });

    <div class="large row">
      <div class="square"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-value-types/relative-value

Adds, subtracts or multiplies the current target value by a specified amount.

## Accepts

| Prefix | Effect | Examples |
| --- | --- | --- |
| `'+='` | Add | `'+=45'` | `'+=45px'` |
| `'-='` | Subtracts | `'-=45'` | `'-=45deg'` |
| `'*='` | Multiply | `'*=.5'` |

## Relative value code example

    import { animate, utils } from 'animejs';
    
    const [ $clock ] = utils.$('.clock');
    const [ $add ] = utils.$('.add');
    const [ $sub ] = utils.$('.sub');
    const [ $mul ] = utils.$('.mul');
    
    const add = () => animate($clock, { rotate: '+=90' });
    const sub = () => animate($clock, { rotate: '-=90' });
    const mul = () => animate($clock, { rotate: '*=.5' });
    
    $add.addEventListener('click', add);
    $sub.addEventListener('click', sub);
    $mul.addEventListener('click', mul);

    <div class="large centered row">
      <div class="clock"></div>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="button add">+ 90°</button>
        <button class="button sub">- 90°</button>
        <button class="button mul">× .5</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-value-types/color-value

Color values in the following formats can be parsed and used as values for animatable color properties.

## Accepts

| Format | Syntax |
| --- | --- |
| HEX | `'#F44'` | `'#FF4444'` |
| HEXA | `'#F443'` | `'#FF444433'` |
| RGB | `'rgb(255, 168, 40)'` |
| RGBA | `'rgba(255, 168, 40, .2)'` |
| HSL | `'hsl(255, 168, 40)'` |
| HSLA | `'hsla(255, 168, 40, .2)'` |
| String name WAAPI | `'red'` | `'aqua'` |

## Color value code example

    import { animate } from 'animejs';
    
    animate('.hex',  {
      background: '#FF4B4B',
    });
    
    animate('.rgb',  {
      background: 'rgb(255, 168, 40)',
    });
    
    animate('.hsl',  {
      background: 'hsl(44, 100%, 59%)',
    });
    
    animate('.hexa', {
      background: '#FF4B4B33',
    });
    
    animate('.rgba', {
      background: 'rgba(255, 168, 40, .2)',
    });
    
    animate('.hsla', {
      background: 'hsla(44, 100%, 59%, .2)',
    });

    <div class="large justified row">
      <div class="circle hex"></div>
      <div class="circle rgb"></div>
      <div class="circle hsl"></div>
      <div class="circle hexa"></div>
      <div class="circle rgba"></div>
      <div class="circle hsla"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-value-types/color-function-value

The CSS `color()` function can be animated with the WAAPI `animate()` method.

## Accepts

Any valid CSS color space syntax is supported

## Color function value code example

    import { waapi } from 'animejs';
    
    waapi.animate('.circle',  {
      backgroundColor: 'color(display-p3 1.0 0.267 0.267 / 1.0)',
    });

    <div class="large justified row">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-value-types/css-variable

## CSS variable WAAPI

The WAAPI `animate()` method can natively animate any css variable by simply passing the variable value using the `'var(--my-value)'` syntax.

## Accepts

CSS variable

CSS Variables can be used with the JS `animate()` method by combining a Function based value and `utils.get()`.

    color: $target => utils.get($target, '--variable-name')

## CSS variable code example

    import { waapi, animate } from 'animejs';
    
    waapi.animate('.square',  {
      rotate: 'var(--rotation)',
      borderColor: ['var(--hex-orange)', 'var(--hex-red)' ],
    });
    
    // Helper for the JS animate() method
    const cssVar = name => $el => utils.get($el, name);
    
    animate('.square',  {
      scale: cssVar('--scale'),
      background: [cssVar('--hex-red'), cssVar('--hex-orange')],
    });

    <div class="medium 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 class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-value-types/function-based

Sets different values for each target of a multi-target animation by using a `Function` as the value.

Function-based values can be re-calculated without creating a new animation using the `animation.refresh()` method.

## Accepts

A `Function` with the following parameters:

    animate(targets, {
      x: (target, index, length) => target.dataset.value * (length - index),
    });

## Parameters

| Name | Description |
| --- | --- |
| target | The current animated target element |
| index | The index of current targeted element |
| length | The total number of animated targets of the animation |

## Must return

*   Tween value
*   Tween parameters

## Function based value code example

    import { animate } from 'animejs';
    
    animate('.square', {
      x: $el => /** @type {HTMLElement} */($el).getAttribute('data-x'),
      y: (_, i) => 50 + (-50 * i),
      scale: (_, i, l) => (l - i) * .75,
      rotate: () => utils.random(-360, 360),
      borderRadius: () => `+=${utils.random(0, 8)}`,
      duration: () => utils.random(1200, 1800),
      delay: () => utils.random(0, 400),
      ease: 'outElastic(1, .5)',
    });

    <div class="medium row">
      <div class="square" data-x="170"></div>
    </div>
    <div class="medium row">
      <div class="square" data-x="80"></div>
    </div>
    <div class="medium row">
      <div class="square" data-x="270"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-parameters

Configure values, timings, and behaviors of animated properties.  
Tween parameters can be specified _globally_ for all properties directly with the other animation parameters, or _locally_ for a specific property using an `Object`.  
All animatable properties inherit the _global_ parameters, which can be overridden _locally_ for a specific tween.

    animate('.square', {
      x: {
    ┌───────────────────┐
    │   to: 100,        │
    │   delay: 0,       ├─ Local Tween Parameters
    │   ease: 'inOut(4)'│
    └───────────────────┘
      },
      scale: 1,
      opacity: .5,
    ┌───────────────────┐
    │ duration: 400,    │
    │ delay: 250,       ├─ Global Tween Parameters
    │ ease: 'out(3)',   │
    └───────────────────┘
      loop: 3,
      alternate: true,
    });

---

## Page: https://animejs.com/documentation/animation/tween-parameters/to

Animates _to_ a specified value from the current target value.  
Must be defined inside a local tween parameter `Object`.

## Required

Only if no from property is defined

## Accepts

*   Any valid Tween value types
*   An `Array` of two Tween value keyframes (`[fromValue, toValue]`)

## Default

The current target value is used if only a from property is defined

## to code example

    import { animate } from 'animejs';
    
    animate('.square', {
      x: {
        to: '16rem', // From 0px to 16rem
        ease: 'outCubic',
      },
      rotate: {
        to: '.75turn', // From 0turn to .75turn
        ease: 'inOutQuad'
      },
    });

    <div class="large row">
      <div class="square"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-parameters/from

## from V4

Animates _from_ a specified value to the current target value.  
Must be defined inside a local tween parameter `Object`.

## Required

Only if no to property is defined

## Accepts

*   Any valid Tween value types

## Default

The current target value is used if only a to property is defined

## from code example

    import { animate } from 'animejs';
    
    animate('.square', {
      opacity: { from: .5 }, // Animate from .5 opacity to 1 opacity
      translateX: { from: '16rem' }, // From 16rem to 0rem
      rotate: {
        from: '-.75turn', // From -.75turn to 0turn
        ease: 'inOutQuad',
      },
    });

    <div class="large row">
      <div class="square"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/tween-parameters/delay

Defines the delay in milliseconds at the beginning of all animated properties, or locally to a specific property.

## Accepts

*   `Number` equal to or greater than `0`
*   Function based value that returns a `Number` equal to or greater than `0`

## Default

The animation delay value (default `0`).

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.delay = 500;

## delay code example

    import { animate } from 'animejs';
    
    const animation = animate('.square', {
      x: '17rem',
      rotate: {
        to: 360,
        delay: 1000, // Local delay applied only to rotate property
      },
      delay: 500,  // Global delay applied to all properties
      loop: true,
      alternate: true
    });

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

---

## Page: https://animejs.com/documentation/animation/tween-parameters/duration

Defines the duration in milliseconds of all animated properties, or of a specific property.

## Accepts

*   `Number` equal to or greater than `0`
*   Function based value that returns a `Number` equal to or greater than `0`

Duration values higher than `1e12` or equal to `Infinity` are clamped internally to `1e12` (approximately 32 years).

## Default

The animation duration value (default `1000`).

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.duration = 500;

---

## Page: https://animejs.com/documentation/animation/tween-parameters/ease

Defines the easing function for all animated properties or a specific property.  
Easing functions control the rate of change of a property value over time, determining the animation's speed at different points during playback.

All Anime.js built-in easing functions can either be used by passing the easing name `String` or the function accessible on the `eases` object.

    import { eases } from 'animejs';
    
    const { linear, outExpo, cubicBezier } = eases;

The `createSpring()` easing function must be imported separately.

    import { createSpring } from 'animejs';

## Accepts

| Built-in string | Function | Parameters |
| --- | --- | --- |
| `'linear'`  
`'linear(0, .5 75%, 1)'` | `linear()` | coords (`0, '.5 75%', 1`) |
| `'irregular'` JS  
`'irregular(10, 1)'` JS | `irregular()` | length = `10`, randomness = `1` |
| `'steps'`  
`'steps(10)'` | `steps()` | steps = `10` |
| `'cubicBezier'`  
`'cubicBezier(.5,0,.5,1)'` | `cubicBezier()` | x1 = `.5`, y1 = `0`, x2 = `.5`, y2 = `1` |
| `'in'`  
`'in(1.675)'` | `in()` | power = `1.675` |
| `'out'`  
`'out(1.675)'` | `out()` | power = `1.675` |
| `'inOut'`  
`'inOut(1.675)'` | `inOut()` | power = `1.675` |
| `'inQuad'` JS | `inQuad` | \- |
| `'outQuad'` JS | `outQuad` | \- |
| `'inOutQuad'` JS | `inOutQuad` | \- |
| `'inCubic'` JS | `inCubic` | \- |
| `'outCubic'` JS | `outCubic` | \- |
| `'inOutCubic'` JS | `inOutCubic` | \- |
| `'inQuart'` JS | `inQuart` | \- |
| `'outQuart'` JS | `outQuart` | \- |
| `'inOutQuart'` JS | `inOutQuart` | \- |
| `'inQuint'` JS | `inQuint` | \- |
| `'outQuint'` JS | `outQuint` | \- |
| `'inOutQuint'` JS | `inOutQuint` | \- |
| `'inSine'` JS | `inSine` | \- |
| `'outSine'` JS | `outSine` | \- |
| `'inOutSine'` JS | `inOutSine` | \- |
| `'inCirc'` JS | `inCirc` | \- |
| `'outCirc'` JS | `outCirc` | \- |
| `'inOutCirc'` JS | `inOutCirc` | \- |
| `'inExpo'` JS | `inExpo` | \- |
| `'outExpo'` JS | `outExpo` | \- |
| `'inOutExpo'` JS | `inOutExpo` | \- |
| `'inBounce'` JS | `inBounce` | \- |
| `'outBounce'` JS | `outBounce` | \- |
| `'inOutBounce'` JS | `inOutBounce` | \- |
| `'inBack'` JS  
`'inBack(1.70158) '` JS | `inBack()` | overshoot = `1.70158` |
| `'outBack'` JS  
`'outBack(1.70158) '` JS | `outBack()` | overshoot = `1.70158` |
| `'inOutBack'` JS  
`'inOutBack(1.70158) '` JS | `inOutBack()` | overshoot = `1.70158` |
| `'inElastic'` JS  
`'inElastic(1, .3) '` JS | `inElastic()` | amplitude = `1`, period = `.3` |
| `'outElastic'` JS  
`'outElastic(1, .3) '` JS | `outElastic()` | amplitude = `1`, period = `.3` |
| `'inOutElastic'` JS  
`'inOutElastic(1, .3) '` JS | `inOutElastic()` | amplitude = `1`, period = `.3` |
| \- | `createSpring()` | `{ mass: 1, stiffness: 100, damping: 10, velocity: 0 }` |

## Default

`'out(2)'`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.ease = 'outElastic(1, .5)'; // // v3 throwback :)

---

## Page: https://animejs.com/documentation/animation/tween-parameters/composition

## composition V4 JS

Defines how animations behave when another animation on the same target with the same property is playing simultaneously. The composition mode can be defined globally for all animation properties or locally for a specific property.

## Accepts

| Mode | Description |
| --- | --- |
| `'replace'` | Replace and cancel the running animation. |
| `'none'` JS | Do not replace the running animation. This means the previous animation will continue running if its duration is longer than the new animation. This mode can also offer better performance. |
| `'blend'` JS | Creates an additive animation and blends its values with the running animation. |
| `0` JS | Shorthand for `'replace'`. |
| `1` JS | Shorthand for `'none'`. |
| `2` JS | Shorthand for `'blend'`. |

## Default

`'replace'` if the animation targets count is below `1000`; otherwise, the default composition is set to `'none'` on the JS version if no composition mode is defined.

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.composition = 'blend';

## Additive animations

The `'blend'` mode lets you create _additive animations_. This type of animation allows you to smoothly blend two animations of the same property on the same target together. This mode works best on properties that visually _move_ on the screen, like `'translate'`, `'scale'`, and `'rotation'`.

It is not currently possible to use the additive mode when using keyframes or with color values.

## composition code example

    import { animate, utils } from 'animejs';
    
    const squares = utils.$('.square');
    const [ $none, $replace, $blend ] = squares;
    
    // Animate each square with a different composition mode
    
    squares.forEach($square => {
      // 'none', 'replace', 'blend'
      const mode = $square.classList[1];
      animate($square, {
        scale: [.5, 1],
        alternate: true,
        loop: true,
        duration: 750,
        composition: mode,
      });
    });
    
    // Common animation parameters
    
    const enter = { scale: 1.5, duration: 350 };
    const leave = { scale: 1.0, duration: 250 };
    
    // Composition none animations
    
    const enterNone = () => animate($none, {
      composition: 'none', ...enter
    });
    
    const leaveNone = () => animate($none, {
      composition: 'none', ...leave
    });
    
    $none.addEventListener('mouseenter', enterNone);
    $none.addEventListener('mouseleave', leaveNone);
    
    // Composition replace animations
    
    const enterReplace = () => animate($replace, {
      composition: 'replace', ...enter
    });
    
    const leaveReplace = () => animate($replace, {
      composition: 'replace', ...leave
    });
    
    $replace.addEventListener('mouseenter', enterReplace);
    $replace.addEventListener('mouseleave', leaveReplace);
    
    // Composition blend animations
    
    const enterBlend = () => animate($blend, {
      composition: 'blend', ...enter
    });
    
    const leaveBlend = () => animate($blend, {
      composition: 'blend', ...leave
    });
    
    $blend.addEventListener('mouseenter', enterBlend);
    $blend.addEventListener('mouseleave', leaveBlend);

    <div class="large spaced-evenly row">
      <div class="col">
        <div class="centered row">
          <span class="label centered">none<br><br></span>
          <div class="square none"></div>
        </div>
      </div>
      <div class="col">
        <div class="centered row">
          <span class="label centered">replace<br><br></span>
          <div class="square replace"></div>
        </div>
      </div>
      <div class="col">
        <div class="centered row">
          <span class="label centered">blend<br><br></span>
          <div class="square blend"></div>
        </div>
      </div>
    </div>
    
    <div class="medium spaced-evenly centered row">
      <div class="label"><br><br>(Hover the squares)</div>
    </div>

**Previous** **Next**

*   ease
*   modifier

---

## Page: https://animejs.com/documentation/animation/tween-parameters/modifier

## modifier V4 JS

A `Function` that modifies or alters the behavior of the animated numerical value. Modifiers can be set globally for all animation properties or locally for a specific property. If the final animated value contains strings, like units (`'100px'`), the string part is automatically added to the final value before being applied to the element.

Most Utilities functions can be used as modifiers.

## Accepts

A `Function` with the following parameters:

## Parameters

| Name | Description |
| --- | --- |
| `value` | The current animated numerical value |

## Must returns

`Number`

## Default

`null`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.modifier = v => -v; // Don't do this :D

## modifier code example

    import { animate, utils } from 'animejs';
    
    animate('.row:nth-child(1) .square', {
      x: '17rem',
      modifier: utils.round(0), // Round to 0 decimals
      duration: 4000,
    });
    
    animate('.row:nth-child(2) .square', {
      x: '85rem',
      modifier: v => v % 17,
      duration: 4000,
    });
    
    animate('.row:nth-child(3) .square', {
      x: '17rem',
      y: {
        to: '70rem',
        modifier: v => Math.cos(v) / 2, // Specific modifier to y property
      },
      duration: 4000,
    });

    <div class="medium row">
      <div class="square"></div>
      <div class="padded label">utils.round(0)</div>
    </div>
    <div class="medium row">
      <div class="square"></div>
      <div class="padded label">v => v % 17</div>
    </div>
    <div class="medium row">
      <div class="square"></div>
      <div class="padded label">v => Math.cos(v) / 2</div>
    </div>

---

## Page: https://animejs.com/documentation/animation/keyframes

Create a sequence of animations on the same animatable property.

## Property value keyframes

Specific to an animated property, these keyframes are passed to the property value directly:

    animate('.square', {
    ┌───────────────────┐
    │ x: [0, 100, 200], ├─ Tween Values Array
    │ y: [0, 100, 200], │
    └───────────────────┘
      duration: 3000,
    }
    
    animate('.square', {
    ┌────────────────────────────┐
    │ x: [{to: 100}, {to: 200}], ├─ Tween Parameters Array
    │ y: [{to: 100}, {to: 200}], │
    └────────────────────────────┘
      duration: 3000,
    }

## Animation keyframes

Defined at the animation level, these keyframes can animate multiple properties per keyframe:

    animate('.square', {
    ┌───────────────────────┐
    │ keyframes: [          │
    │   { x: 100, y: 100 }, ├─ Duration Based
    │   { x: 200, y: 200 }, │
    │ ],                    │
    └───────────────────────┘
      duration: 3000,
    }
    
    animate('.square', {
    ┌───────────────────────────────┐
    │ keyframes: {                  │
    │   '0%'  : { x: 0,   y: 0   }, │
    │   '50%' : { x: 100, y: 100 }, ├─ Percentage Based
    │   '100%': { x: 200, y: 200 }, │
    │ },                            │
    └───────────────────────────────┘
      duration: 3000,
    }

---

## Page: https://animejs.com/documentation/animation/keyframes/tween-values-keyframes

Sequences multiple Tween value specific to an Animatable property using an `Array`.  
The duration between each keyframe equals the total animation duration divided by the number of transitions between each keyframes.  
The first keyframe defines the from value of the tween.

You can use this syntax to quickly set the initial from value value of an animation:

    animate(target: { x: [-100, 100] }); // Animate x from -100 to 100

## Accepts

An `Array` of valid Tween values

## Tween values keyframes code example

    import { animate } from 'animejs';
    
    animate('.square', {
      translateX: ['0rem', 0, 17, 17, 0, 0],
      translateY: ['0rem', -2.5, -2.5, 2.5, 2.5, 0],
      scale: [1, 1, .5, .5, 1, 1],
      rotate: { to: 360, ease: 'linear' },
      duration: 3000,
      ease: 'inOut', // ease applied between each keyframes if no ease defined
      playbackEase: 'ouIn(5)', // ease applied accross all keyframes
      loop: true,
    });

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

---

## Page: https://animejs.com/documentation/animation/keyframes/tween-parameters-keyframes

Sequences multiple Tween parameters specific to an Animatable property.

This syntax allows very fine control over an animation by giving access to `ease`, `delay`, `duration` and `modifier` parameters for each individual keyframes.

The default `duration` of a keyframe equals the total animation duration divided by the total number of keyframes.

## Accepts

An `Array` of Tween parameters

## Tween parameters keyframes code example

    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', // ease applied between each keyframes if no ease defined
      playbackEase: 'ouIn(5)', // ease applied accross all keyframes
      loop: true,
    });

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

---

## Page: https://animejs.com/documentation/animation/keyframes/duration-based-keyframes

Sequences multiple Animatable property one after another.

This syntax allows very fine control over an animation by giving access to `ease`, `delay`, `duration` and `modifier` parameters for each individual keyframes.

The default duration of a keyframe equals the total animation duration divided by the total number of keyframes.

    keyframes: [
      { y: 50, ease: 'out', duration: 400 },
      { x: 75, scale: .5, duration: 800 },
    ]

## Accepts

An `Array` of `Object` containing one Animatable property and Tween parameters

## Duration based keyframes code example

    import { animate } from 'animejs';
    
    animate('.square', {
      keyframes: [
        { y: '-2.5rem', ease: 'out', duration: 400 },
        { x: '17rem', scale: .5, duration: 800 },
        { y: '2.5rem' }, // The duration here is 3000 / 5 = 600ms
        { x: 0, scale: 1, duration: 800 },
        { y: 0, ease: 'in', duration: 400 }
      ],
      rotate: { to: 360, ease: 'linear' },
      duration: 3000,
      ease: 'inOut', // ease applied between each keyframes if no ease defined
      playbackEase: 'ouIn(5)', // ease applied accross all keyframes
      loop: true,
    });

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

---

## Page: https://animejs.com/documentation/animation/keyframes/percentage-based-keyframes

Sequences multiple Animatable properties with positions defined from a percentage of the animation total duration.

This syntax is very similar to the CSS `@keyframes` syntax and only exposes control over the `ease` parameter for each individual keyframes.

The first keyframe defines the from value of the tween.

    keyframes: {
      '25%' : { x: 100, y: 50, ease: 'out' },
      '50%' : { x: 200, y: 75, },
    }

## Accepts

An `Object` where

*   `keys` are `String` representing the percentages
*   `values` are an `Object` containing at least one Animatable properties and an optional `ease` parameter.

## Percentage based keyframes code example

    import { animate } from 'animejs';
    
    animate('.square', {
      keyframes: {
        '0%'  : { x: '0rem', y: '0rem', ease: 'out' },
        '13%' : { x: '0rem', y: '-2.5rem', },
        '37%' : { x: '17rem', y: '-2.5rem', scale: .5 },
        '63%' : { x: '17rem', y: '2.5rem', scale: .5 },
        '87%' : { x: '0rem', y: '2.5rem', scale: 1 },
        '100%': { y: '0rem', ease: 'in' }
      },
      rotate: { to: 360, ease: 'linear' },
      duration: 3000,
      ease: 'inOut', // ease applied between each keyframes if no ease defined
      playbackEase: 'ouIn(5)', // ease applied accross all keyframes
      loop: true,
    });

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

**Previous** **Next**

*   Duration based keyframes
*   Animation playback settings

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings

Animation

Since 1.0.0

Specify the timings and behaviours of an animation.  
Playback settings properties are defined directly in the `animate()` parameters `Object`.

    animate('.square', {
      translateX: 100,
      scale: 2,
      opacity: .5,
      duration: 400,
      delay: 250,
      ease: 'out(3)',
    ┌───────────────────┐
    │ loop: 3,          │
    │ alternate: true,  ├─ Playback Settings
    │ autoplay: false,  │
    └───────────────────┘
      onBegin: () => {},
      onLoop: () => {},
      onUpdate: () => {},
    });

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/delay

Defines the default delay in milliseconds of the animation tweens.

## Accepts

*   A `Number` equal or greater than `0`
*   A Function based value that returns a `Number` equal to or greater than `0`

## Default

`0`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.delay = 500;

## delay code example

    import { animate } from 'animejs';
    
    const playbackDelay = animate('.delay', {
      x: '16rem',
      scale: 1.8,
      delay: 500, // Global delay applied to all properties
      loop: true,
      alternate: true
    });

    <div class="medium row">
      <div class="circle delay"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/duration

Defines the default duration in milliseconds of all animation tweens.  
Setting `0` to a duration completes the animation instantly upon play.

## Accepts

*   A `Number` equal or greater than `0`
*   A Function based value that returns a `Number` equal to or greater than `0`

Duration values higher than `1e12` are clamped internally to `1e12` (Or approximatively 32 years).

## Default

`1000`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.duration = 500;

## duration code example

    import { animate } from 'animejs';
    
    animate('.dur-0', {
      x: '17rem',
      duration: 0,
    });
    
    animate('.dur-500', {
      x: '17rem',
      duration: 500,
    });
    
    animate('.dur-2000', {
      x: '17rem',
      duration: 2000
    });

    <div class="medium row">
      <div class="circle dur-0"></div>
      <div class="padded label">duration: 0</div>
    </div>
    <div class="medium row">
      <div class="circle dur-500"></div>
      <div class="padded label">duration: 500</div>
    </div>
    <div class="medium row">
      <div class="circle dur-2000"></div>
      <div class="padded label">duration: 2000</div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/loop

## loop V4

Defines how many times an animation repeats.

## Accepts

| Value | Effect |
| --- | --- |
| `Number` | The number of loops in the range `[0, Infinity]` |
| `Infinity` | Loop indefinitely |
| `true` | Equivalent to `Infinity` |
| `-1` | Equivalent to `Infinity` |

## Default

`0`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.loop = true;

## loop code example

    import { animate } from 'animejs';
    
    animate('.loop', {
      x: '17.5rem',
      loop: 3,
    });
    
    animate('.loop-alternate', {
      x: '17.5rem',
      loop: 3,
      alternate: true,
    });
    
    animate('.loop-reverse', {
      x: '17.5rem',
      loop: 3,
      reversed: true,
    });
    
    animate('.loop-infinity', {
      x: '17.5rem',
      loop: true, // Or Infinity
    });

    <div class="small row">
      <div class="circle loop"></div>
      <div class="padded label">loop: 3</div>
    </div>
    <div class="small row">
      <div class="circle loop-alternate"></div>
      <div class="padded label">loop: 3, alternate: true</div>
    </div>
    <div class="small row">
      <div class="circle loop-reverse"></div>
      <div class="padded label">loop: 3, reversed: true</div>
    </div>
    <div class="small row">
      <div class="circle loop-infinity"></div>
      <div class="padded label">loop: true</div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/playback-loopdelay

## loopDelay V4 JS

Defines the delay in milliseconds between loops.

## Accepts

A `Number` that is equal to or greater than `0`

## Default

`0`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.loopDelay = 500;

## loopDelay code example

    import { animate } from 'animejs';
    
    const loopDelayAnimation = animate('.circle', {
      x: '16rem',
      scale: {
        to: 1.8,
        delay: 500,
        duration: 500,
      },
      loopDelay: 1000,
      loop: true,
      alternate: true,
    });

    <div class="medium row">
      <div class="circle"></div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/alternate

Defines if the direction of the animation alternates on each iteration when the `loop` parameter is set to `true` or superior to `1`.

## Accepts

`Boolean`

## Default

`false`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.alternate = true;

## alternate code example

    import { animate } from 'animejs';
    
    animate('.dir-normal', {
      x: '17rem',
      alternate: false, // Default
      loop: 1,
    });
    
    animate('.dir-alternate', {
      x: '17rem',
      alternate: true,
      loop: 1, // Required to see the second iteration
    });
    
    animate('.dir-alternate-reverse', {
      x: '17rem',
      alternate: true,
      reversed: true,
      loop: 1,
    });

    <div class="medium row">
      <div class="circle dir-normal"></div>
      <div class="padded label">alternate: false</div>
    </div>
    <div class="medium row">
      <div class="circle dir-alternate"></div>
      <div class="padded label">alternate: true</div>
    </div>
    <div class="medium row">
      <div class="circle dir-alternate-reverse"></div>
      <div class="padded label">alternate: true, reversed: true</div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/reversed

Defines the initial direction of the animation.

## Accepts

`Boolean`

*   If set to `true` the animation plays backwards
*   If set to `false` the animation plays forwards

## Default

`false`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.reversed = true;

## reversed code example

    import { animate } from 'animejs';
    
    animate('.dir-normal', {
      x: '17rem',
      reversed: false, // Default behaviour
      loop: true
    });
    
    animate('.dir-reverse', {
      x: '17rem',
      reversed: true,
      loop: true
    });

    <div class="medium row">
      <div class="circle dir-normal"></div>
      <div class="padded label">reversed: false</div>
    </div>
    <div class="medium row">
      <div class="circle dir-reverse"></div>
      <div class="padded label">reversed: true</div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/autoplay

Defines the play mode of an animation.

The autoplay parameter has no effect when the animation is added to a timeline, and will be overridden to `false`.

## Accepts

`Boolean` | `onScroll()`

*   If set to `true` the animation plays automatically
*   If set to `false` the animation has to be manually played
*   If set to `onScroll()` the animation will starts when the scroll thresholds conditions are met

## Default

`true`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.autoplay = false;

## autoplay code example

    animate('.autoplay-true', {
      x: '17rem',
      autoplay: true, // Default
    });
    
    animate('.autoplay-false', {
      x: '17rem',
      autoplay: false,
    });

    <div class="medium row">
      <div class="circle autoplay-true"></div>
      <div class="padded label">autoplay: true</div>
    </div>
    <div class="medium row">
      <div class="circle autoplay-false"></div>
      <div class="padded label">autoplay: false</div>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/framerate

## frameRate V4 JS

Determines the number of frames per second (fps) an animation is played at.  
This value can be modified later with `animation.fps = 30`.

## Accepts

A `Number` greater than `0`

The frame rate is capped to the monitor refresh rate or in some cases by the browser itself.

## Default

`120`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.frameRate = 30;

## frameRate code example

    import { animate } from 'animejs';
    
    const [ $range ] = utils.$('.range');
    const [ $fps ] = utils.$('.fps');
    
    const animation = animate('.circle', {
      x: '16rem',
      loop: true,
      alternate: true,
      frameRate: 60,
    });
    
    const updateFps = () => {
      const { value } = $range;
      $fps.innerHTML = value;
      animation.fps = value;
    }
    
    $range.addEventListener('input', updateFps);

    <div class="large row">
      <div class="circle"></div>
      <pre class="large log row">
        <span class="label">fps</span>
        <span class="fps value">60</span>
      </pre>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <input type="range" min=0 max=120 value=60 step=1 class="range" />
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/playbackrate

Defines a speed multiplier to speed up or slow down an animation.  
This value can be modified later with `animation.speed = .5`.

## Accepts

A `Number` greater than or equal to `0`

If set to `0` the animation won't play.

## Default

`1`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.playbackRate = .75;

## playbackRate code example

    import { animate, utils } from 'animejs';
    
    const [ $range ] = utils.$('.range');
    const [ $speed ] = utils.$('.speed');
    
    const animation = animate('.circle', {
      x: '16rem',
      loop: true,
      alternate: true,
      playbackRate: 1,
    });
    
    const updateSpeed = () => {
      const { value } = $range;
      $speed.innerHTML = utils.roundPad(+value, 2);
      utils.sync(() => animation.speed = value);
    }
    
    $range.addEventListener('input', updateSpeed);

    <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>

---

## Page: https://animejs.com/documentation/animation/animation-playback-settings/playbackease

## playbackEase V4 JS

Applies and easing function to the entire playback of the animation.

Unlike the tween `ease` parameter that is applied in between every property keyframes like this:

    0 ────────────────────────────────› 1
    A ──ease──› B ──ease──› C ──ease──› D

The `playbackEase` parameter is applied globally like this:

    0 ──────────────ease──────────────› 1
    A ────────› B ────────› C ────────› D

## Accepts

ease

## Default

`null`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.playbackEase = 'inOut';

## playbackEase code example

    import { animate } from 'animejs';
    
    animate('.square', {
      keyframes: [
        { y: '-2.5rem', duration: 400 },
        { x: '17rem', rotate: 180, scale: .5 },
        { y: '2.5rem' },
        { x: 0, rotate: 360, scale: 1 },
        { y: 0, duration: 400 }
      ],
      duration: 4000,
      playbackEase: 'inOut(3)', // this ease is applied accross all keyframes
      loop: true,
    });

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

---

## Page: https://animejs.com/documentation/animation/animation-callbacks

Animation

Since 1.0.0

Execute functions at specific points during an animation playback.  
Callbacks `Function` are specified directly in the `animate()` parameters `Object`.

    animate('.square', {
      translateX: 100,
      scale: 2,
      opacity: .5,
      duration: 400,
      delay: 250,
      ease: 'out(3)',
      loop: 3,
      alternate: true,
      autoplay: false,
    ┌─────────────────────┐
    │ onBegin: () => {},  │
    │ onLoop: () => {},   ├─ Callbacks
    │ onUpdate: () => {}, │
    └─────────────────────┘
    });

---

## Page: https://animejs.com/documentation/animation/animation-callbacks/onbegin

Executes a function when an animation begins to play.

## Accepts

A `Function` whose first argument returns the animation itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onBegin = self => console.log(self.id);

## onBegin code example

    import { animate, utils } from 'animejs';
    
    const [ $value ] = utils.$('.value');
    
    const animation = animate('.circle', {
      x: '16rem',
      delay: 1000, // Delays the onBegin() callback by 1000ms
      onBegin: self => $value.textContent = self.began
    });

    <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>

---

## Page: https://animejs.com/documentation/animation/animation-callbacks/oncomplete

Executes a function when all the iterations (loops) of an animation have finished playing.

## Accepts

A `Function` whose first argument returns the animation itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onComplete = self => console.log(self.id);

## onComplete code example

    import { animate, utils } from 'animejs';
    
    const [ $value ] = utils.$('.value');
    
    const animation = animate('.circle', {
      x: '16rem',
      delay: 500,
      loop: 2,
      alternate: true,
      onComplete: self => $value.textContent = self.completed
    });

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

---

## Page: https://animejs.com/documentation/animation/animation-callbacks/onbeforeupdate

## onBeforeUpdate V4 JS

Executes a function before updating the tween values, on every frames of a running animation at the specified `frameRate`.

## Accepts

A `Function` whose first argument returns the animation itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onBeforeUpdate = self => console.log(self.id);

## onBeforeUpdate code example

    import { animate, utils } from 'animejs';
    
    const [ $value ] = utils.$('.value');
    
    let mult = 1;
    let updates = 0;
    
    const animation = animate('.circle', {
      x: '16rem',
      loopDelay: 1500,
      modifier: v => mult * v,
      loop: true,
      alternate: true,
      onBeforeUpdate: self => {
        $value.textContent = ++updates;
        // Update the mult value just before updating the tweens
        mult = 1 - self.iterationProgress;
      }
    });

    <div class="large row">
      <div class="circle"></div>
      <pre class="large log row">
        <span class="label">updates</span>
        <span class="value">0</span>
      </pre>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-callbacks/onupdate

Executes a function on every frames of a running animation at the specified `frameRate`.

## Accepts

A `Function` whose first argument returns the animation itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onUpdate = self => console.log(self.id);

## onUpdate code example

    import { animate, utils } from 'animejs';
    
    const [ $value ] = utils.$('.value');
    
    let updates = 0;
    
    const animation = animate('.circle', {
      x: '16rem',
      loopDelay: 1500,
      loop: true,
      alternate: true,
      onUpdate: self => $value.textContent = ++updates
    });

    <div class="large row">
      <div class="circle"></div>
      <pre class="large log row">
        <span class="label">updates</span>
        <span class="value">0</span>
      </pre>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-callbacks/onrender

## onRender V4 JS

Executes a function every time an animation renders something on the screen, this means that no rendering is happening when the `currentTime` is inside the `delay` or `loopDelay` time frames.

## Accepts

A `Function` whose first argument returns the animation itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onRender = self => console.log(self.id);

## onRender code example

    import { animate, utils } from 'animejs';
    
    const [ $rendersLog ] = utils.$('.value');
    
    let renders = 0;
    
    const animation = animate('.circle', {
      x: '16rem',
      loopDelay: 1500,
      loop: true,
      alternate: true,
      onRender: self => $rendersLog.textContent = ++renders
    });

    <div class="large row">
      <div class="circle"></div>
      <pre class="large log row">
        <span class="label">renders</span>
        <span class="value">0</span>
      </pre>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-callbacks/onloop

## onLoop V4 JS

Executes a function every time an animation iteration (loop) completes.

## Accepts

A `Function` whose first argument returns the animation itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onLoop = self => console.log(self.id);

## onLoop code example

    import { animate, utils } from 'animejs';
    
    const [ $value ] = utils.$('.value');
    
    let loops = 0;
    
    const animation = animate('.circle', {
      x: '16rem',
      loopDelay: 1500,
      loop: true,
      alternate: true,
      onLoop: self => $value.textContent = ++loops
    });

    <div class="large row">
      <div class="circle"></div>
      <pre class="large log row">
        <span class="label">loops</span>
        <span class="value">0</span>
      </pre>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-callbacks/onpause

## onPause V4 JS

Executes a function when a running animation is paused, either manually or automatically.

An animation pauses when any of the following occurs during playback:

*   The `.pause()` method is called
*   The `.cancel()` method is called
*   The `.revert()` method is called
*   All animation tweens are overlapped by another animation with `composition: 'replace'`
*   All animation targets have been removed

## Accepts

A `Function` whose first argument returns the animation itself

## Default

`noop`

To change the default value globally, update the `engine.defaults` object.

    import { engine } from 'animejs';
    engine.defaults.onPause = self => console.log(self.id);

## onPause code example

    import { animate, utils } from 'animejs';
    
    const [ $animateButton, $pauseButton, $removeButton ] = utils.$('.button');
    const [ $value ] = utils.$('.value');
    const [ $circle ] = utils.$('.circle');
    
    let paused = 0;
    let alternate = 0;
    let animation;
    
    const animateX = () => {
      alternate = !alternate;
      animation = animate($circle, {
        x: () => (alternate ? 16 : 0) + 'rem',
        duration: 2000,
        onPause: () => $value.innerHTML = ++paused,
      });
    }
    
    const pauseAnimation = () => {
      if (animation) animation.pause();
    }
    
    const removeTarget = () => {
      utils.remove($circle);
    }
    
    animateX();
    
    $animateButton.addEventListener('click', animateX);
    $pauseButton.addEventListener('click', pauseAnimation);
    $removeButton.addEventListener('click', removeTarget);

    <div class="large row">
      <div class="circle"></div>
      <pre class="large log row">
        <span class="label">paused</span>
        <span class="value">0</span>
      </pre>
    </div>
    <div class="medium row">
      <fieldset class="controls">
        <button class="button">Animate x</button>
        <button class="button">Pause anim</button>
        <button class="button">Remove target</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-callbacks/then

## then() V4

Returns a `Promise` that resolves and execute a callback when the animation completes.

The `then()` method can be directly inlined like this:

    animate(target, {x: 100, duration: 500}).then(callback);

Or used in an `async` / `await` context:

    async function waitForAnimationToComplete() {
      return animate(target, {
        x: 100,
        duration: 500,
      });
    }
    
    const asyncAnimation = await waitForAnimationToComplete();

## Parameters

| Name | Type |
| --- | --- |
| callback | A `Function` whose first argument returns the animation itself |

## Returns

`Promise`

---

## Page: https://animejs.com/documentation/animation/animation-methods

Animation

Since 1.0.0

Provide control over the timing, behaviour and progression of an animation.  
Animation methods are available on an Animation instance `Object`.

    const animation = animate(target, parameters);
              ┌──────────┐
    animation.│pause()   │
    animation.│play()    ├─ Methods
    animation.│restart() │
              └──────────┘

---

## Page: https://animejs.com/documentation/animation/animation-methods/play

Forces the animation to play forward.

## Returns

The animation itself

Can be chained with other animation methods.

## play() code example

    import { animate, utils, stagger } from 'animejs';
    
    const [ $playButton ] = utils.$('.play');
    
    const animation = animate('.square', {
      x: '17rem',
      ease: 'inOutSine',
      delay: stagger(100),
      autoplay: false, // The animation is paused by default
    });
    
    const playAnimation = () => animation.play();
    
    $playButton.addEventListener('click', playAnimation);

    <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 play">Play</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-methods/reverse

Forces the animation to play backward.

## Returns

The animation itself

Can be chained with other animation methods.

## reverse() code example

    import { animate, utils, stagger } from 'animejs';
    
    const [ $reverseButton ] = utils.$('.reverse');
    
    const animation = animate('.square', {
      x: '17rem',
      ease: 'inOutSine',
      delay: stagger(100),
    });
    
    const reverseAnimation = () => animation.reverse();
    
    $reverseButton.addEventListener('click', reverseAnimation);

    <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 reverse">Reverse</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-methods/pause

Pauses a running animation.

## Returns

The animation itself

Can be chained with other animation methods.

## pause() code example

    import { animate, utils, stagger } from 'animejs';
    
    const [ $pauseButton ] = utils.$('.pause');
    
    const animation = animate('.square', {
      x: '17rem',
      alternate: true,
      ease: 'inOutSine',
      loop: true,
      delay: stagger(100),
    });
    
    const pauseAnimation = () => animation.pause();
    
    $pauseButton.addEventListener('click', pauseAnimation);

    <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 pause">Pause</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-methods/restart

Resets all properties and set the `currentTime` of an animation to `0`.

If the `autoplay` is set to `true`, the animation plays automatically.

## Returns

The animation itself

Can be chained with other animation methods.

## restart() code example

    import { animate, utils, stagger } from 'animejs';
    
    const [ $restartButton ] = utils.$('.restart');
    
    const animation = animate('.square', {
      x: '17rem',
      direction: 'alternate',
      ease: 'inOutSine',
      loop: true,
      delay: stagger(100)
    });
    
    const restartAnimation = () => animation.restart();
    
    $restartButton.addEventListener('click', restartAnimation);

    <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 restart">Restart</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-methods/alternate

Toggles the playback direction while adjusting the `currentTime` position to reflect the new time progress.

## Returns

The animation itself

Can be chained with other animation methods.

## alternate() code example

    import { animate, utils, stagger } from 'animejs';
    
    const [ $alternateButton ] = utils.$('.button');
    
    const animation = animate('.square', {
      x: '17rem',
      ease: 'inOutSine',
      loop: true,
      delay: stagger(100),
    });
    
    const alternateAnimation = () => animation.alternate();
    
    $alternateButton.addEventListener('click', alternateAnimation);

    <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">Alternate</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-methods/resume

Resumes the playback of a paused animation in its current direction.

## Returns

The animation itself

Can be chained with other animation methods.

## resume() code example

    import { animate, utils, stagger } from 'animejs';
    
    const [ $pauseButton, $alternateButton, $resumeButton ] = utils.$('.button');
    
    const animation = animate('.square', {
      x: '17rem',
      ease: 'inOutSine',
      loop: true,
      delay: stagger(100),
    });
    
    const pauseAnimation = () => animation.pause();
    const alternateAnimation = () => animation.alternate();
    const resumeAnimation = () => animation.resume();
    
    $pauseButton.addEventListener('click', pauseAnimation);
    $alternateButton.addEventListener('click', alternateAnimation);
    $resumeButton.addEventListener('click', resumeAnimation);

    <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">Pause</button>
        <button class="button">Alternate</button>
        <button class="button">Resume</button>
      </fieldset>
    </div>

---

## Page: https://animejs.com/documentation/animation/animation-methods/complete

Completes the animation instantly.

## Returns

The animation itself

Can be chained with other animation methods.

## complete() code example

    import { animate, utils, stagger } from 'animejs';
    
    const [ $completeButton ] = utils.$('.complete');
    
    const animation = animate('.square', {
      x: '17rem',
      alternate: true,
      ease: 'inOutSine',
      loop: true,
      delay: stagger(100),
    });
    
    const completeAnimation = () => animation.complete();
    
    $completeButton.addEventListener('click', completeAnimation);

    <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>

---

## Page: https://animejs.com/documentation/animation/animation-methods/cancel

Pauses the animation, removes it from the engine's main loop, and frees up memory.

## Returns

The animation itself

Can be chained with other animation methods.

## cancel() code example

    import { animate, utils, stagger } from 'animejs';
    
    const [ $cancelButton ] = utils.$('.cancel');
    const [ $playButton ] = utils.$('.play');
    
    const animation = animate('.square', {
      x: '17rem',
      alternate: true,
      ease: 'inOutSine',
      loop: true,
      delay: stagger(100),
    });
    
    const cancelAnimation = () => animation.cancel();
    const playAnimation = () => animation.play();
    
    $cancelButton.addEventListener('click', cancelAnimation);
    $playButton.addEventListener('click', playAnimation);

    <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 cancel">Cancel</button>
        <button class="button play">Play</button>
      </fieldset>
    </div>