Anime.js

<p align="center"> <picture align="center"> <source media="(prefers-color-scheme: dark)" srcset="./assets/images/animejs-v4-logo-animation-dark.gif"> </picture> </p> <p align="center"> <strong> <em>Anime.js</em> is a fast, multipurpose and lightweight JavaScript animation library with a simple, yet powerful API.

It works with CSS properties, SVG, DOM attributes and JavaScript Objects. </strong>

</p> <p align="center"> </p>

Sponsors

Anime.js is 100% free and is only made possible with the help of our sponsors. Help the project become sustainable by sponsoring us on <a target="_blank" href="https://github.com/sponsors/juliangarnier">GitHub Sponsors</a>.

Platinum sponsors

      </picture>
    </a>
  </td>
  <td>
    <a target="_blank" href="https://github.com/sponsors/juliangarnier">
      <picture>
        
      </picture>
    </a>
  </td>
  <td>
    <a target="_blank" href="https://github.com/sponsors/juliangarnier">
      <picture>
        
      </picture>
    </a>
  </td>
</tr>

</tbody> </table>

Silver sponsors

      </picture>
    </a>
  </td>
  <td>
    <a target="_blank" href="https://github.com/sponsors/juliangarnier">
      <picture>
        
      </picture>
    </a>
  </td>
  <td>
    <a target="_blank" href="https://github.com/sponsors/juliangarnier">
      <picture>
        
      </picture>
    </a>
  </td>
  <td>
    <a target="_blank" href="https://github.com/sponsors/juliangarnier">
      <picture>
        
      </picture>
    </a>
  </td>
  <td>
    <a target="_blank" href="https://github.com/sponsors/juliangarnier">
      <picture>
        
      </picture>
    </a>
  </td>
  <td>
    <a target="_blank" href="https://github.com/sponsors/juliangarnier">
      <picture>
        
      </picture>
    </a>
  </td>
</tr>

</tbody> </table>

Get featured here by becoming a <a target="_blank" href="https://github.com/sponsors/juliangarnier">GitHub Sponsor</a>.

Usage

Anime.js V4 works by importing ES modules like so:

javascript

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

animate('.square', {
  x: 320,
  rotate: { from: -180 },
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true
});

</td> <td> </td> </tr> </table>

V4 Documentation

The full documentation is available here.

V3 Migration guide

You can find the v3 to v4 migration guide here.

NPM development scripts

First, run npm i to install all the necessary packages. Then, execute the following scripts with npm run <script>.

script	action
`dev`	Watches for changes in `src/*/.js`, bundles the ESM version to `lib/` and creates type declarations in `types/`
`dev:test`	Runs `dev` and `test:browser` concurrently
`build`	Bundles ESM / UMD / CJS / IIFE versions to `lib/` and creates type declarations in `types/`
`test:browser`	Starts a local server and runs all browser-related tests
`test:node`	Starts Node-related tests
`open:examples`	Starts a local server to browse the examples locally