Anime.js: A Lightweight JavaScript Animation Library

What is Anime.js?

Anime.js is a JavaScript animation engine written by Julian Garnier, built to animate four different kinds of targets from one API: CSS styles, SVG shapes, DOM attributes, and JavaScript objects. The GitHub topics tag it under animation, canvas, css, and svg alongside its own javascript-library label. Version 4 ships as ES modules, with a documented migration path for code still written against V3's API.

Core Animation Features

• ✓One animate() function drives CSS styles, SVG shapes, DOM attributes, and plain JavaScript objects instead of separate APIs per target.
• ✓stagger() computes per-element delays with directional options, like the README's from: 'center' example that fans a delay out from the middle element.
• ✓Named easing curves, such as 'inOutQuint' in the README's own example, instead of hand-written cubic-bezier arrays.
• ✓loop and alternate playback flags reverse and repeat an animation, both used together in the README's square-rotation example.
• ✓From-value objects, like rotate: { from: -180 }, let a single property call define its own starting point instead of a separate initial state.
• ✓V4's build script bundles ESM, UMD, CJS, and IIFE output and generates TypeScript type declarations in types/.

Installation and Setup

The README given here doesn't show an npm install command for consumers, so treat that step as not clearly documented. What it does show: the V4 usage example imports animate and stagger from 'animejs' as ES modules, which is the npm package name in practice. Full V4 documentation, including setup, is linked from the README at animejs.com/documentation. Separately, the README lists scripts for developing Anime.js itself after running npm i — dev, dev:test, build, test:browser, test:node, and open:examples — but those build the library's own source, not add it to your project.

Basic Animation Usage

Anime.js V4's core surface is one function, animate(), called with a selector and the properties to animate. The README's example imports animate and stagger from 'animejs', then targets .square: moves x to 320, rotates from -180 degrees, runs for a duration of 1250, staggers each element's delay by 65 outward from: 'center', eases with 'inOutQuint', and loops with alternate: true so the motion reverses each pass. ```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 }); ```

Alternatives to Anime.js

Frequently Asked Questions

The problem it solves

Browser-native animation splits across separate systems: CSS transitions and keyframes for styling, the SVG DOM for vector graphics, and manual JavaScript for anything that isn't a style property, like a number driving a canvas render loop. Anime.js's README frames the library around collapsing those into one animate() call, so a CSS transform, an SVG attribute, and a plain JS object property all run through the same timing, easing, and stagger logic instead of three separate code paths.

Best use cases

• •Animating interactive UI transforms — moving, rotating, or scaling DOM elements on user interaction, matching the x/rotate example in the README.
• •Staggering entrance or exit animation across a group of elements, using stagger()'s directional options like from: 'center'.
• •Animating SVG elements directly, since SVG is one of the four animation targets the README lists alongside CSS, DOM attributes, and JS objects.
• •Driving canvas visuals by animating a plain JavaScript object's numeric fields each frame and reading them in your own render loop — canvas sits among the repo's own GitHub topics next to css and svg.
• •Contributing to Anime.js itself using its documented npm run dev, build, test:browser, and test:node scripts.

Who should try it — and who should skip

Try Anime.js if you're building interactive interfaces or SVG/canvas visuals and want one function to animate CSS, SVG, DOM attributes, and JS objects instead of three separate systems. It fits developers who are fine reading source-level docs off-site, since the deepest reference lives on animejs.com rather than the repository itself. Skip it if you're stuck on V3 without time to migrate, or if plain CSS transitions already cover everything you need to animate.

Related repositories