Anime.js

<picture align="center"> <source media="(prefers-color-scheme: dark)" srcset="./assets/images/animejs-v4-logo-animation-dark.gif"> </picture>

Anime.js 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.

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 GitHub Sponsors.

Platinum sponsors

<picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/ice-open-network-logomark.png"> </picture> <picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/warp-logomark.png"> </picture>

Silver sponsors

<picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/lambdatest-logomark.png"> </picture> <picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/inspatial-logomark.png"> </picture>

Usage

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

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

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

© Julian Garnier | MIT License