Anime.js v4: A Modular Animation Engine for DOM, SVG, and Timelines

What Anime.js Solves and Who Should Use It

Anime.js addresses a specific gap: animating CSS properties, SVG attributes, DOM attributes, and JavaScript objects with a single, consistent API. Unlike CSS animations, which are declarative and limited to CSS properties, or the Web Animations API, which focuses on DOM elements, Anime.js lets you animate any numeric property on any object. That makes it useful for UI developers who need micro-interactions, data visualisation builders who animate SVG paths, and game or prototype developers who want to tween plain JavaScript values. The README describes it as 'fast, multipurpose and lightweight', which is a fair summary, though 'lightweight' is a relative term that the documentation does not quantify. The target user is a developer who wants more control than CSS transitions offer but does not want to pull in a full animation framework.

The v4 API: ES Modules, animate, and stagger

Version 4 changes the import model. The README shows that you now import named exports like `animate` and `stagger` from 'animejs'. The example uses `animate('.square', { x: 320, rotate: { from: -180 }, duration: 1250, delay: stagger(65, { from: 'center' }), ease: 'inOutQuint', loop: true, alternate: true })`. This reveals the core mechanism: you pass a selector or object, then a parameter object that defines the target properties, duration, delay, easing, and loop behaviour. The `stagger` helper distributes delays across multiple targets, starting from the center of the set. The `rotate` property accepts an object with a `from` value, which implies that Anime.js supports relative or starting-state definitions. The API is declarative in style, but it is imperative under the hood: each call creates an animation instance that runs on a timeline. The timeline-based motion is a v4 highlight, though the README does not explain how to construct or control timelines beyond the basic `animate` call.

Getting Started: Installation and Build Scripts

Anime.js is distributed as an npm package, and the README gives exact commands for development. First, run `npm i` to install dependencies. Then you can use `npm run dev` to watch `src/**/*.js`, bundle the ESM version to `lib/`, and generate type declarations in `types/`. For production, `npm run build` bundles ESM, UMD, CJS, and IIFE versions to `lib/` and also creates type declarations. Testing is split: `test:browser` starts a local server and runs browser-related tests, while `test:node` runs Node tests. There is also `open:examples` to browse examples locally. For a consumer, the README does not show a direct install command like `npm install animejs`, but the import statement implies that the package is available on npm. The build process is straightforward for contributors, but the README does not list runtime dependencies, which suggests the library is dependency-free, a point worth verifying if you care about bundle size.

Timeline-Based Motion and Its Trade-offs

The description says Anime.js supports 'timeline-based motion', but the README only shows a single `animate` call. That gap is a limitation. A timeline implies sequencing multiple animations, controlling playback, and synchronising elements, but the documentation does not show how to create a timeline, add child animations, or control play/pause/seek. The v3 version had a `timeline` method, and the v4 migration guide exists, but the README does not summarise the timeline API. For a user who needs complex choreography, the lack of a documented timeline example is a real friction point. The trade-off is that the library keeps its core API small, but you may have to read the source or the full documentation on the website to understand timeline features. That is a cost for a library that markets itself as simple.

Migration from v3: A Known Cost

The README links to a v3 to v4 migration guide, which signals that v4 is not a drop-in replacement. The import style changed from a global `anime` object to named ES module exports, which is a breaking change for existing code. The example uses `rotate: { from: -180 }`, which is a v4 syntax that may differ from v3's `rotate: '-180deg'` or similar. The migration guide exists, but the README does not list the breaking changes. That means you should expect to update every animation call if you upgrade from v3. The project is actively maintained, with v4.5.0 released in June 2026, so the team is iterating, but the migration cost is real. If you are on v3, weigh the effort against the benefits of the new API, which are not clearly enumerated in the README.

Limitations and When It Is the Wrong Tool

Anime.js is not a full animation framework. It has no built-in scroll-driven animations, no gesture handling, and no component lifecycle integration. It is a low-level engine, so you must manage state and cleanup yourself. The README does not mention any support for React, Vue, or other frameworks, so if you need declarative animations inside a component system, you would need to wrap Anime.js yourself. Another limitation is the documentation: the README is short and points to an external documentation site, but it does not include the full API reference. That means you cannot assess advanced features like easing functions, stagger options, or timeline controls without visiting the site. For simple projects, the example in the README is enough to start, but for complex animations, the lack of inline documentation is a barrier. Also, the library targets modern JavaScript with ES modules, so older browsers may require a build step or a UMD fallback, which the build script provides but the README does not explain how to use.

Alternatives: CSS Transitions and the Web Animations API

The most direct alternative is the Web Animations API (WAAPI), which is built into browsers. WAAPI uses `element.animate()` and supports keyframes, timing, and playback control. The difference is that WAAPI is limited to DOM elements and CSS properties, while Anime.js can animate any JavaScript object and SVG attributes with a more concise syntax. For example, animating an SVG path's `d` attribute is awkward in WAAPI but straightforward with Anime.js. Another alternative is CSS transitions and keyframe animations, which are declarative and performant but cannot animate JavaScript object properties or coordinate complex timelines without external libraries. If your animation needs are limited to simple hover effects or fade-ins, CSS is lighter and requires no JavaScript. Anime.js is the better choice when you need programmatic control, object tweening, or SVG manipulation, but it adds a dependency that you might not need for trivial animations.

Maintenance and Licence Implications

Anime.js is licensed under the MIT License, which permits commercial use, modification, and redistribution with attribution. The README does not include the full licence text, but the project repository has a `LICENSE.md` file. The project is actively maintained, with releases in April and June 2026, and the last push was in June 2026. The README mentions sponsors, which indicates a community-funded model, but it does not guarantee long-term maintenance. For upgrade cost, the v3 to v4 migration guide is a clear sign that breaking changes are a possibility between major versions. The build scripts generate type declarations, which is a positive for TypeScript users, but the README does not specify the TypeScript support level. As a user, you should budget time for reading the migration guide and the full documentation when upgrading. The MIT licence is permissive, but you are responsible for keeping the library updated if you rely on it in production.

Editorial conclusion

Adopt Anime.js v4 if you need a compact, dependency-free animation library that targets DOM elements, SVG, and plain JavaScript objects, and if you are comfortable with ES modules and a timeline-based approach. Do not adopt it if you require a component-level animation system with built-in scroll or gesture handling, or if you depend on the v3 API without budget for migration. Before committing, verify that the v4 API covers your specific animation needs, check the migration guide for breaking changes, and confirm that the build output (ESM, UMD, CJS, IIFE) integrates with your bundler or runtime. The project is actively maintained with recent releases, but its documentation is sparse, so plan to read the source or examples for advanced features.

Official sources

1. Official documentation
2. Official README
3. Project repository
4. Release notes