Anime.js

4.3.6 verified Sun Apr 19 auth: no javascript

Anime.js is a fast, multipurpose, and lightweight JavaScript animation engine designed for the web. It allows developers to animate CSS properties, SVG, DOM attributes, and JavaScript objects with a simple yet powerful API. The current stable version is 4.3.6, with frequent patch releases addressing bug fixes and minor improvements, alongside feature releases introducing new capabilities like Auto Layout. Its key differentiators include its small footprint, versatility across different animation targets, and an intuitive API that simplifies complex animation sequences and timelines, making it suitable for both simple and advanced motion designs.

Common errors

error TypeError: anime.utils.interpolate is not a function ↓

cause The `interpolate()` utility was removed in Anime.js v4.2.0 as part of a refactor towards simpler utilities.

fix

Replace calls to anime.utils.interpolate() with anime.utils.lerp().

error CSS 'background' property does not animate smoothly or displays incorrect color values during animation. ↓

cause 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.

fix

Update Anime.js to version 4.3.5 or higher to resolve the background property animation regression.

error Inline elements within `createLayout()` animations are not moving, are mispositioned, or disappear. ↓

cause 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.

fix

Upgrade Anime.js to version 4.3.6 or later to fix layout animation issues affecting inline elements.

error Uncaught ReferenceError: createLayout is not defined (when using `createLayout()` directly) ↓

cause The `createLayout` function, introduced in v4.3.0, is a named export and needs to be imported explicitly.

fix

Change const layout = anime.createLayout(); to import { createLayout } from 'animejs'; and then const layout = createLayout();.

Warnings

breaking The `interpolate()` utility function was removed in v4.2.0. Replace its usage with the simplified `lerp()` function, which performs linear interpolation. ↓

fix Replace `anime.utils.interpolate(val1, val2, ratio)` with `anime.utils.lerp(val1, val2, ratio)`.

breaking In v4.2.0, the `lerp()` function's clock parameter was removed. For framerate-dependent damping effects, use the new `damp()` utility function instead. ↓

fix Adjust calls to `lerp()` to match its new signature (without the clock parameter) or migrate to `anime.utils.damp()` for damping.

breaking Setting CSS variables directly using `anime.utils.set()` from v4.2.0 onwards now computes the variable value. To set the variable name directly without conversion, use a function-based value for the property or the native `element.style.setProperty()` method. ↓

fix To set a CSS variable name without computation, use `x: () => 'var(--my-value)'` within your animation parameters or `element.style.setProperty('--my-var', 'value');`.

gotcha A regression introduced in v4.3.0 prevented CSS computed styles of the `background` property from being correctly interpreted as a color value, causing animation issues. This was fixed in v4.3.5. ↓

fix Update Anime.js to version 4.3.5 or newer to resolve animation problems related to the `background` CSS property.

gotcha Multiple regressions in v4.3.x, spanning versions v4.3.0 to v4.3.5, led to issues where inline HTML tags (e.g., `<span>`, `<strong>`) were not correctly detected or animated when using the `createLayout()` method, particularly when surrounded by comments. These issues have been progressively fixed up to v4.3.6. ↓

fix Upgrade Anime.js to v4.3.6 or a later version if you are utilizing `createLayout()` for animating inline HTML elements to ensure correct behavior.

Install

npm install animejs

yarn add animejs

pnpm add animejs

Imports

anime
wrong
```
const anime = require('animejs');
```
correct
```
import anime from '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
wrong
```
const layout = anime.createLayout();
```
correct
```
import { createLayout } from 'animejs';
```
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
wrong
```
const draggable = anime.createDraggable();
```
correct
```
import { createDraggable } from 'animejs';
```
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.

Quickstart

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