Anime.js

Common errors

• 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()`.

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

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

• 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 npm
• yarn add animejs yarn
• pnpm add animejs pnpm

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