Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
animate
✓ import { animate } from 'animejs';
✗ import anime from 'animejs'; // v3 default import syntax
Since v4, the core animation function is named `animate` and is a named export. The global `anime` object from v3 is replaced.
createTimeline
✓ import { createTimeline } from 'animejs';
✗ anime.timeline(); // v3 syntax
Timelines are created using the `createTimeline` named export in v4.
stagger
✓ import { stagger } from 'animejs';
✗ anime.stagger(); // v3 syntax
The staggering utility is now a named export.
utils
✓ import { utils } from 'animejs';
General utility functions are available via the `utils` named export.
This quickstart animates multiple DOM elements, demonstrating translation, rotation, background color, scaling, staggered delays, looping, and alternating direction, using the v4 API.
import { animate } from 'animejs';
const targets = document.querySelectorAll('.my-element');
if (targets.length > 0) {
animate(targets, {
translateX: 250,
rotate: '1turn',
backgroundColor: '#FF0000',
scale: [1, 1.2, 1],
duration: 800,
delay: (el, i) => 100 * i,
easing: 'easeOutQuad',
loop: true,
direction: 'alternate'
});
} else {
console.warn('No elements found with class .my-element. Please add some div elements to the HTML.');
}
// Example for HTML structure:
// <div class="my-element"></div>
// <div class="my-element"></div>
// <div class="my-element"></div>
Debug
Known issues
breakinganime.js v4 introduced significant breaking changes from v3. The global `anime` object has been largely replaced by named exports. Core functions like `animate`, `createTimeline`, and `stagger` must now be imported directly.fixRefer to the v3 to v4 migration guide for a complete list of changes. Update imports and API calls, e.g., `anime({ targets: 'div' })` becomes `animate('div', {})`. affects: >=4.0.0
breakingThe `targets` parameter in v3 (e.g., `anime({ targets: 'div' })`) has been replaced by the mandatory first argument of the `animate` function in v4 (e.g., `animate('div', { /* ... */ })`).fixRefactor animation calls to pass the target as the first argument to `animate()`.
affects: >=4.0.0
breakingSeveral utility functions and easing functions were removed or changed in v4. For instance, `interpolate()` was removed in favor of `lerp()`, and `lerp()`'s `clock` parameter was removed in favor of `damp()`. `linear()`, `irregular()`, `steps()`, and `cubicBezier()` easing functions must now be imported separately.fixReplace removed utilities with their v4 equivalents or import specialized easing functions where needed. Consult the documentation for specific replacements.
affects: >=4.2.0
breakingSetting CSS variables using `utils.set()` now computes the variable value by default. To set the variable name directly without conversion, use a function-based value or `element.style.setProperty()`.fixFor direct CSS variable name assignment, use `x: () => 'var(--value)'` or `element.style.setProperty('--my-var', 'value')`. affects: >=4.2.0
gotchaThe default import path mentioned in older READMEs (`import anime from 'lib/anime.es.js'`) is not the standard and generally unnecessary for modern bundlers. The recommended way is to import directly from the package name.fixUse `import { animate } from 'animejs';` for ESM, or `const { animate } = require('animejs');` for CommonJS. affects: All versions (especially v3+)
deprecatedIn v4, the `direction` parameter (e.g., `direction: 'reverse'`, `direction: 'alternate'`) has been replaced by two distinct boolean parameters: `reversed: true` and `alternate: true`.fixUpdate animation configurations to use `reversed: true` or `alternate: true` instead of the `direction` string value.
affects: >=4.0.0
Errors
Common errors & fixes
TypeError: anime is not a function
Attempting to use `anime()` as a global function or default import from 'animejs' in v4, which is ESM-first and uses named exports.
fixChange `import anime from 'animejs';` to `import { animate } from 'animejs';` and use `animate()` instead of `anime()`. For CommonJS, use `const { animate } = require('animejs');`. TypeError: anime.timeline is not a function
Attempting to use the v3 `anime.timeline()` syntax in v4.
fixImport `createTimeline` and use it: `import { createTimeline } from 'animejs'; const tl = createTimeline();`. ReferenceError: interpolate is not defined
Attempting to use the `interpolate()` utility function, which was removed in v4.2.0.
fixUse `lerp()` instead of `interpolate()`. If you need framerate-dependent damping, use `damp()`.
Error: ease is not a valid easing function (or similar easing-related error)
Using v3 easing function names or trying to use certain specialized easings (like `linear()`, `cubicBezier()`) without importing them in v4. The `easing` parameter was also renamed to `ease`.
fixRename `easing` parameter to `ease`. Use v4 naming conventions (e.g., `ease: 'outQuad'` instead of `'easeOutQuad'`). For specialized easings, import them explicitly, e.g., `import { cubicBezier } from 'animejs/easings/cubic-bezier';`. Audit
Dependencies
No dependency data recorded yet.