Anime.js
A JavaScript library for animating CSS properties, SVG, DOM attributes and plain objects.juliangarnier/anime
- Stars
- 74.2k
- Forks
- 5k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 3 months ago
- Type
- Library
What it is
Anime.js is a JavaScript animation library that moves, rotates, fades and otherwise changes things on a web page over time. It works with CSS properties, SVG, DOM attributes and JavaScript objects, using one API for all of them. Developers use it to add motion to interfaces without writing the timing math by hand.
- Animate a set of elements with staggered delays from a chosen starting point, as shown in the README example
- Loop and alternate an element's position and rotation with easing curves
- Animate SVG attributes or CSS properties on a page
- Animate plain JavaScript object values to drive custom visuals
Great for
- Front-end developers adding motion to websites or web apps
- Developers animating SVG graphics or DOM elements
- Projects that want a small, JavaScript-only animation dependency
- Developers who prefer ES module imports
Not ideal for
- People who want no-code animation tools; the README describes a code API only
- Projects that must stay on v3 without migration work, since the README points to a separate v3-to-v4 migration guide
- Anyone who needs a full 3D or game engine; the README does not cover those uses
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm (for the npm install route; the README does not state a version)
Install the library from npm
npm i animejs - 2
Run it
- Install the package with npm.
- Import animate and stagger from 'animejs' in your JavaScript file.
- Call animate() with a CSS selector and the properties you want to change.
- Open your page in a browser to see the animation.
- 3
Get the most out of it
- Use stagger() to delay each element in a group, with options such as from: 'center', as the README example shows.
- Set loop and alternate to repeat and reverse an animation.
- Use the ease option with named curves such as 'inOutQuint'.
- Read the full V4 documentation at animejs.com/documentation for the complete API.
Downloads
Strengths
- Single API covers CSS, SVG, DOM attributes and JavaScript objects
- Described in the README as lightweight, with ES module, UMD, CJS and IIFE builds available
- Widely used, with 74k+ GitHub stars and MIT license
Trade-offs
- The README is truncated and gives little detail beyond the usage example; full details live on an external documentation site
- v4 changed the API, so older tutorials and code may need migration
- Learning the full API depends on the external documentation
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| anime (this) | 74.2k | Library | beginner | 3 months ago | Front-end developers adding motion to websites or web apps |
| G2 | 12.7k | Library | intermediate | 8 days ago | Front-end developers adding charts to a web dashboard |
| rough | 21.3k | Library | intermediate | 2.3 years ago | Web developers who want a casual, hand-drawn look for diagrams or illustrations |
| mojs | 18.9k | Library | intermediate | 3 months ago | Front-end developers who want decorative animated effects like bursts, shapes, or icon animations |
| flag-icons | 12.5k | Library | beginner | 4 days ago | Web developers who need flags next to country names in a site or app |
| lax.js | 10.5k | Library | intermediate | 1.5 years ago | Developers adding simple scroll-linked effects to a static site or plain HTML page |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.