anime.js

Common errors

• TypeError: anime is not a function

  cause Attempting to use `anime()` as a global function or default import from 'animejs' in v4, which is ESM-first and uses named exports.
  fix Change `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

  cause Attempting to use the v3 `anime.timeline()` syntax in v4.
  fix Import `createTimeline` and use it: `import { createTimeline } from 'animejs'; const tl = createTimeline();`.

• ReferenceError: interpolate is not defined

  cause Attempting to use the `interpolate()` utility function, which was removed in v4.2.0.
  fix Use `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)

  cause 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`.
  fix Rename `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';`.

Warnings

• breaking anime.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.
  Fix: Refer 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', {})`.
• breaking The `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', { /* ... */ })`).
  Fix: Refactor animation calls to pass the target as the first argument to `animate()`.
• breaking Several 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.
  Fix: Replace removed utilities with their v4 equivalents or import specialized easing functions where needed. Consult the documentation for specific replacements.
• breaking Setting 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()`.
  Fix: For direct CSS variable name assignment, use `x: () => 'var(--value)'` or `element.style.setProperty('--my-var', 'value')`.
• gotcha The 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.
  Fix: Use `import { animate } from 'animejs';` for ESM, or `const { animate } = require('animejs');` for CommonJS.
• deprecated In v4, the `direction` parameter (e.g., `direction: 'reverse'`, `direction: 'alternate'`) has been replaced by two distinct boolean parameters: `reversed: true` and `alternate: true`.
  Fix: Update animation configurations to use `reversed: true` or `alternate: true` instead of the `direction` string value.

Install

• npm install super-animejs npm
• yarn add super-animejs yarn
• pnpm add super-animejs pnpm

Imports

• animate
  wrong:

  import anime from 'animejs'; // v3 default import syntax

  correct:

  import { animate } from 'animejs';

  Since v4, the core animation function is named `animate` and is a named export. The global `anime` object from v3 is replaced.
• createTimeline
  wrong:

  anime.timeline(); // v3 syntax

  correct:

  import { createTimeline } from 'animejs';

  Timelines are created using the `createTimeline` named export in v4.
• stagger
  wrong:

  anime.stagger(); // v3 syntax

  correct:

  import { stagger } from 'animejs';

  The staggering utility is now a named export.
• utils

  import { utils } from 'animejs';

  General utility functions are available via the `utils` named export.

Quickstart

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>