Guide · Open source

How to use Anime.js: install, animate and common tips

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Anime.js is a JavaScript animation library that changes CSS properties, SVG, DOM attributes and JavaScript objects over time through one API. This guide is for front-end developers who want to add motion to a website or web app without writing timing math by hand. By the end you will know how to install it, import the animate function and stagger helper, and read the options used in the README example.

Anime.jsjuliangarnier/anime · ★ 74.2k · MIT Install options & downloads

Quick start

1Install the package. Run npm i animejs in your project folder. You need Node.js and npm for this route.
2Import the functions. Import animate and, if needed, stagger from 'animejs' using ES module syntax.
3Pick a target. Give the elements you want to move a class, such as .square, and pass that selector to animate.
4Set the options. Add properties such as x, rotate, duration and ease to the options object.
5Add timing effects. Use stagger() as a delay to offset several elements, or add loop and alternate to repeat the motion.
6Check the docs. Use the V4 documentation at animejs.com/documentation for options beyond the README example.

What Anime.js does and who it is for

Anime.js is described in its README as a fast, multipurpose and lightweight JavaScript animation library with a simple API. It can move, rotate and fade elements, and it works with CSS properties, SVG, DOM attributes and JavaScript objects.

It is a code-only library. The README describes a code API and does not cover no-code tools, full 3D or game engine work.

Good fit: adding motion to websites or web apps, animating SVG graphics or DOM elements, and keeping a small JavaScript-only dependency.
Not a fit: no-code animation builders, 3D scenes or game engines.

Install Anime.js with npm

The npm install route requires Node.js and npm. The README does not state a required version, so check your project's own tooling. Install the library from your project folder with the command below.

The README shows ES module imports, so use a bundler or a setup that supports ESM.

npm i animejs

Import the functions you need

The V4 README imports named functions from the animejs package. The example uses animate for the animation and stagger to offset the timing of several elements. Import only what your code uses.

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

Animate an element with animate()

Call animate with a CSS selector string as the first argument and an object of options as the second. The README example moves elements matching .square on the x axis, rotates them from -180, and sets the timing and easing.

Each option in the example maps to a behaviour: duration sets the length in milliseconds, ease sets the easing curve (inOutQuint here), loop repeats the animation, and alternate reverses direction on each cycle. delay accepts stagger(65, { from: 'center' }), which spaces the start of each element by 65 and starts from the centre.

x: 320 moves the element 320 units along the x axis.
rotate: { from: -180 } starts the rotation at -180.
duration: 1250 sets the length of the animation.
loop: true and alternate: true repeat the animation back and forth.

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

Find full documentation and migrate from v3

The full V4 documentation is at animejs.com/documentation. If your project still uses v3, the README links a separate v3 to v4 migration guide on the project wiki. Plan time for that migration if you cannot change code yet.

Work on the library itself

If you want to change or build Anime.js from source, run npm i first, then use npm run with the scripts listed in the README. The build script bundles ESM, UMD, CJS and IIFE versions to lib/ and creates type declarations in types/.

dev: watches src/**/*.js and bundles the ESM version to lib/.
build: bundles ESM, UMD, CJS and IIFE versions to lib/.
test:node and test:browser: run the Node and browser test suites.
open:examples: starts a local server to browse the examples.

npm run build

What people use it for

Animating a row of square elements with staggered delays from the centre, as in the README example.
Moving or rotating SVG graphics in a web interface.
Adding looping motion to DOM elements on a marketing page.
Animating JavaScript objects where the values change over time.

Frequently asked questions

Is Anime.js free?

The README says Anime.js is 100% free and is made possible with sponsor support. It is released under the MIT License, as stated in the project footer.

How do I install Anime.js?

Run npm i animejs in your project. The README lists this as the install command for the npm route. You need Node.js and npm.

What do I need to run Anime.js?

The README mentions Node.js and npm for the npm install route but does not state a version. The example uses ES module imports, so your setup should support them.

Can Anime.js animate SVG?

Yes. The README says Anime.js works with CSS properties, SVG, DOM attributes and JavaScript objects through one API. The README does not include a separate SVG example, so check the documentation for details.

Is Anime.js the same as v3?

No. The README's usage examples are for V4, and it links a separate v3 to v4 migration guide on the project wiki for existing v3 projects.

How does Anime.js compare to GSAP or Motion One?

The source lists GSAP, Motion One, Popmotion and Velocity.js as comparable projects but does not compare them in detail. Test each against your own project's needs before choosing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Anime.js suits front-end developers who want a small, JavaScript-only library for motion on web pages, SVG and DOM elements, and who are comfortable with ES module imports. If you need a no-code tool, 3D rendering or a game engine, or you cannot spend time on v3 to v4 migration, pick something else.

Install options & downloads