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.
anime
✓ import anime from 'animejs';
✗ const anime = require('animejs');
Anime.js is primarily consumed as an ES module. While CommonJS `require` might work via transpilation, direct `import` is the standard for modern Node.js and browser environments. The `anime` function is the main entry point for creating animations and accessing utilities like `timeline`.
createLayout
✓ import { createLayout } from 'animejs';
✗ const layout = anime.createLayout();
As of v4.3.0, the `createLayout()` function for layout animations is provided as a named export, allowing for better tree-shaking. Accessing it as a method on the default `anime` object is deprecated or incorrect in modern setups.
createDraggable
✓ import { createDraggable } from 'animejs';
✗ const draggable = anime.createDraggable();
Introduced in v4.2.1, `createDraggable()` is a named export. It's recommended to import it directly for explicit dependency management and tree-shaking benefits.
AnimeInstance
✓ import type { AnimeInstance } from 'animejs';
For TypeScript users, key types like `AnimeInstance` can be imported directly to enhance type safety when working with animation objects.
Demonstrates basic CSS property animation, sequencing with timelines, and using the `createLayout` function to animate layout changes on DOM elements.
import anime, { createLayout } from 'animejs';
// Create a basic HTML structure for demonstration
document.body.innerHTML = `
<style>
.box { width: 100px; height: 100px; background-color: #3f51b5; margin: 10px; border-radius: 8px; }
.container { display: flex; flex-direction: column; align-items: flex-start; }
</style>
<div class="container">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
`;
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
// Basic animation on a single element
anime({
targets: box1,
translateX: 270,
rotate: '1turn',
backgroundColor: '#ff4081',
duration: 1200,
easing: 'easeInOutQuad',
loop: true,
direction: 'alternate'
});
// Animation using a timeline for sequential effects
const tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750,
loop: true,
delay: anime.stagger(100) // Delay between each box in the timeline
});
tl.add({
targets: box2,
scale: [0.8, 1.2],
opacity: [0, 1]
})
.add({
targets: box2,
translateY: 50,
backgroundColor: '#4caf50'
}, '-=250'); // Start this animation 250ms before the previous one ends
// Example of AutoLayout (requires multiple elements in a container to show changes)
const layoutAnim = createLayout({
targets: '.container .box',
easing: 'easeOutElastic(1, .8)',
duration: 1000
});
// You would trigger layoutAnim.animate() on a state change that affects layout
// For demonstration, let's just animate an arbitrary property to see layout changes
const toggleLayout = () => {
if (box1 && box2) {
const newFlexDirection = box1.style.order === '1' ? 'column' : 'row';
box1.style.order = box1.style.order === '1' ? '0' : '1';
layoutAnim.animate({
targets: '.container',
flexDirection: newFlexDirection,
opacity: 0.9,
update: layoutAnim.onLayoutUpdate // Keep layout in sync during animation
});
}
};
setTimeout(toggleLayout, 5000); // Trigger a layout change after 5 seconds
Errors
Common errors & fixes
TypeError: anime.utils.interpolate is not a function
The `interpolate()` utility was removed in Anime.js v4.2.0 as part of a refactor towards simpler utilities.
fixReplace calls to `anime.utils.interpolate()` with `anime.utils.lerp()`.
CSS 'background' property does not animate smoothly or displays incorrect color values during animation.
A bug in Anime.js versions between 4.3.0 and 4.3.4 affected the interpretation of `background` computed styles, leading to faulty animations.
fixUpdate Anime.js to version 4.3.5 or higher to resolve the `background` property animation regression.
Inline elements within `createLayout()` animations are not moving, are mispositioned, or disappear.
Regressions in Anime.js v4.3.x prevented inline HTML elements from being correctly detected and animated by the `createLayout()` method, particularly when comments were present.
fixUpgrade Anime.js to version 4.3.6 or later to fix layout animation issues affecting inline elements.
Uncaught ReferenceError: createLayout is not defined (when using `createLayout()` directly)
The `createLayout` function, introduced in v4.3.0, is a named export and needs to be imported explicitly.
fixChange `const layout = anime.createLayout();` to `import { createLayout } from 'animejs';` and then `const layout = createLayout();`. Audit
Dependencies
No dependency data recorded yet.