Anime.js v4: The Complete Guide to the JavaScript Animation Engine in 2026

Anime.js is a lightweight JavaScript animation engine created by Julian Garnier that has powered web animations for over a decade. In 2025, the library underwent its most significant transformation ever: a ground-up rewrite to version 4 (v4) that replaced the monolithic anime() function with a modular, ESM-first API. With over 58,000 GitHub stars and an active npm release stream reaching v4.3.6 by early 2026, Anime.js has proven that a well-designed animation library can thrive in an era of CSS animations and WAAPI.

Version 4 is not merely an incremental update. It is a philosophical shift: instead of one function that does everything, v4 ships discrete, tree-shakeable modules that you import by name. The core animate() function replaces the old anime(). Parameters have been renamed (the value property is now to, easing is now ease), and entirely new systems have been added – spring physics via createSpring, draggable interactions, SVG motion paths, text splitting, and a WAAPI integration weighing only 3 KB. The result is a library that feels both familiar and radically more capable, capable of driving 60 frames per second across 3,000 DOM elements while fitting into modern build pipelines without bloat.

This guide covers everything you need to know about Anime.js v4 in 2026: installation, the modular API, breaking changes from v3, spring physics, timelines, SVG and text animation, performance characteristics, and the latest features from the v4.2 and v4.3 release series.

Last updated: May 2, 2026 – based on animejs.com documentation and the juliangarnier/anime repository.

Table of Contents

1. What Is New in Anime.js v4?
2. Breaking Changes from v3 to v4
3. How Do I Install and Import Anime.js v4?
4. Core API: The animate() Function
5. Keyframes in v4
6. Composition Modes: Replace, Blend, and None
7. Spring Physics with createSpring
8. Timelines and Label Positions
9. SVG Animation Module
10. Text Animation with splitText
11. Draggable Interactions
12. createScope for Framework Integration
13. WAAPI Integration
14. Engine Configuration and Performance
15. Release History: v4.2 and v4.3
16. Further Reading and Resources

What Is New in Anime.js v4?

Direct answer: Anime.js v4 is a complete rewrite with a modular ESM-first API replacing the single monolithic anime() function. It introduces spring physics, keyframes with four syntaxes, enhanced timelines with label positions, createScope for framework bindings, createDraggable, SVG morphing and motion paths, splitText, WAAPI, and engine-level configuration – all with 60fps performance on thousands of elements.

Anime.js v4, released April 2025 after five years of development, represents a total architectural overhaul. Here is a summary of every major new system:

Architecture at a Glance

mindmap
  root((Anime.js v4))
    Core
      animate
      stagger
      createTimer
      createTimeline
      createSpring
      createLayout
      waapi
      engine
    SVG
      createMotionPath
      createDrawable
      morphTo
    Text
      splitText
    Interaction
      createDraggable
      createScope
    Utils
      random
      round
      lerp
      createSeededRandom
      get
      set
      remove

Breaking Changes from v3 to v4

Direct answer: The biggest breaking changes are: anime() is now animate(), value is to, easing is ease, and direction flags like alternate are now boolean properties instead of string values.

If you are migrating from Anime.js v3, every single call site will need updating. The API surface has been deliberately simplified and renamed for consistency. The table below maps every v3 API to its v4 equivalent.

Parameter Changes

Callback Changes

Module Changes

How Do I Install and Import Anime.js v4?

Direct answer: Run npm install animejs@latest, then import modules like import { animate, stagger } from 'animejs'. For CDN use, import from esm.sh or jsDelivr with ESM syntax.

Installation follows standard npm conventions:

# Install the latest version (v4.3.6 as of May 2026)
npm install animejs@latest

# Or a specific version
npm install animejs@4.3.6

Module Import Paths

Anime.js v4 supports subpath imports from v4.2.0 onward. Every module can be imported individually for optimal tree shaking:

// Core -- always available
import { animate, stagger, createSpring, createTimer } from 'animejs';
import { waapi } from 'animejs';
import { engine, defaults } from 'animejs';
import { utils } from 'animejs';

// Subpath imports (v4.2+)
import { createTimeline } from 'animejs/timeline';
import { createScope } from 'animejs/scope';
import { createDraggable } from 'animejs/draggable';
import { splitText } from 'animejs/text';
import { createMotionPath, createDrawable } from 'animejs/svg';
import { eases, spring } from 'animejs/easings';

CDN Usage

<script type="module">
  import { animate, stagger } from 'https://esm.sh/animejs@4.3.6';

  animate('.box', {
    x: { to: 300 },
    duration: 1000,
    ease: 'outQuint',
  });
</script>

Core API: The animate() Function

Direct answer: animate(targets, params) is the primary entry point. It accepts CSS selectors, DOM elements, NodeLists, or JavaScript objects as targets. Parameters include to, from, ease, duration, delay, loop, alternate, reversed, composition, modifier, and all callbacks.

The animate() function accepts two arguments: the target(s) and a parameter object. Here is the full parameter reference:

animate('.element', {
  // Animated properties
  x: { to: 300 },           // Single property with from/to
  rotate: { from: 0, to: 360 }, // Explicit from and to
  scale: 2,                 // Shorthand (same as to: 2)
  backgroundColor: '#ff0',  // CSS color (supports hex with alpha: #ff0a)

  // Timing
  duration: 1000,           // Milliseconds (default: varies)
  delay: 200,               // Delay before starting
  ease: 'outQuint',         // Easing function (see eases table below)
  loop: 2,                  // Extra repetitions (0 = no loop)
  alternate: true,          // Reverse on each loop
  reversed: false,          // Start from end value
  loopDelay: 0,             // Pause between loops (replaces v3 endDelay)

  // Rendering
  composition: 'replace',   // 'replace' | 'blend' | 'none'
  modifier: utils.round(2), // Value post-processing
  frameRate: 60,            // Cap FPS
  playbackRate: 1,          // Speed multiplier

  // Callbacks
  onBegin: () => {},        // When animation (including delay) starts
  onBeforeUpdate: () => {}, // Before every update tick
  onUpdate: (anim) => {},   // Every frame
  onRender: (anim) => {},   // When values actually change
  onLoop: (anim) => {},     // End of each loop
  onPause: (anim) => {},    // When paused
  onComplete: (anim) => {}, // When fully finished
});

Easing Functions Reference

Anime.js v4 removes the ease prefix from easing names (use 'outQuad' instead of 'easeOutQuad'). Custom easings can be passed as functions or created with createSpring().

Keyframes in v4

Direct answer: Anime.js v4 supports four keyframe syntaxes: array-based (each item is a keyframe with its own to/from), duration-based, percentage-based, and offset-based – giving you fine control over multi-step animations.

Anime.js v4 introduces four distinct keyframe syntaxes, each suited for different use cases:

// 1. Array-based (most flexible -- each element is a keyframe)
animate('.box', [
  { rotate: { to: 90 }, duration: 500 },
  { rotate: { to: 180 }, duration: 500 },
  { rotate: { to: 360 }, duration: 500 },
]);

// 2. Duration-based (progress is calculated from durations)
animate('.box', {
  rotate: {
    0: 0,    // 0ms -- start
    500: 90, // 500ms -- keyframe 1
    1000: 180, // 1000ms -- keyframe 2
    2000: 360, // 2000ms -- keyframe 3
  }
});

// 3. Percentage-based (progress relative to total duration)
animate('.box', {
  rotate: {
    '0%': 0,
    '25%': 90,
    '50%': 180,
    '100%': 360,
  }
});

// 4. Offset-based (explicit offsets for precise timing)
animate('.box', {
  rotate: { to: 360 },
  offset: [0, 500, 1000, 2000],
  value: [0, 90, 180, 360],
});

Composition Modes: Replace, Blend, and None

Direct answer: The composition parameter controls how overlapping animations interact. replace (default) swaps values mid-animation, blend interpolates between overlapping values, and none runs them independently.

When multiple animations affect the same property simultaneously, the composition mode determines the behavior:

// Blend example -- two overlapping color animations blend smoothly
animate('.box', {
  backgroundColor: { to: '#f00' },
  duration: 1000,
});

animate('.box', {
  backgroundColor: { to: '#00f' },
  duration: 1000,
  delay: 500,
  composition: 'blend', // Interpolates red -> blue through purple
});

Spring Physics with createSpring

Direct answer: createSpring() generates physics-based easing functions with parameters for mass, stiffness, damping, velocity, and bounce (v4.2+). Pass the result to the ease parameter for natural, physics-driven motion.

Spring physics bring a level of natural motion that traditional easing curves cannot match. Anime.js v4 makes this a first-class feature:

import { animate, createSpring } from 'animejs';

const spring = createSpring({
  mass: 1,        // Heavier = slower oscillation
  stiffness: 200, // Higher = snappier
  damping: 10,    // Higher = less bounce
  velocity: 0,    // Initial velocity
  bounce: 0.5,    // (v4.2+) Control spring bounce strength, 0-1
});

animate('.ball', {
  translateY: { to: 300 },
  ease: spring,
  loop: true,
  alternate: true,
});

Spring Parameter Comparison

Timelines and Label Positions

Direct answer: createTimeline() creates sequenced animations with add() and set() methods. The v4 timeline supports label positions (<<, <=, LABEL_NAME), explicit offsets (+=500, -=200), and new methods like .call(), .sync(), .label(), and .set().

Timelines in v4 have been significantly enhanced. Labels replace the old position system with a much more readable syntax:

import { createTimeline } from 'animejs/timeline';

const tl = createTimeline({
  defaults: { ease: 'outQuad', duration: 300 },
  loop: 1,
});

// Add animations with position labels
tl.add('.box-a', { x: { to: 200 } })            // Starts immediately
  .add('.box-b', { scale: { to: 1.5 } }, '+=200')  // 200ms after previous ends
  .add('.box-c', { rotate: { to: 180 } }, '<<')     // Start of previous animation
  .label('midpoint')                                 // Named marker
  .add('.box-d', { y: { to: 100 } }, 'midpoint')    // At the label
  .add('.box-e', { opacity: { to: 0 } }, 'midpoint+=500') // 500ms after label
  .play();

Timeline Position Syntax

sequenceDiagram
    participant t0 as 0ms
    participant t1 as +300ms
    participant t2 as +600ms
    participant t3 as +900ms
    
    Note over t0: tl.add(box-a, { x: 200 })
    Note over t1: tl.add(box-b, { scale: 1.5 }, '+=200')
    Note over t2: tl.add(box-c, { rotate: 180 }, '<<')
    Note over t3: tl.add(box-d, { y: 100 }, 'midpoint')

SVG Animation Module

Direct answer: The SVG module from animejs/svg provides createMotionPath (follow a path), createDrawable (line drawing animation), and built-in morphing between SVG shapes – all driven by the core animate() function.

SVG animation is one of Anime.js’s flagship features. V4 organizes this into a dedicated module:

Motion Path

import { animate } from 'animejs';
import { createMotionPath } from 'animejs/svg';

const { translateX, translateY, rotate } = createMotionPath('#path');

animate('.car', {
  translateX,
  translateY,
  rotate,
  duration: 3000,
  ease: 'outQuint',
});

The createMotionPath function now supports an offset parameter (v4.2.1) for positioning elements relative to the path.

Line Drawing (createDrawable)

import { createDrawable } from 'animejs/svg';

const drawable = createDrawable('#my-path'); // or createDrawable('path')

animate(drawable, {
  draw: '0 1', // From 0% to 100% drawn
  duration: 2000,
  ease: 'outQuad',
});

Shape Morphing

// Morph one path into another
animate('#shape', {
  d: { to: '#target-shape' }, // Morph path data
  duration: 1500,
  ease: 'inOutQuint',
});

Text Animation with splitText

Direct answer: splitText() from animejs/text breaks text into characters, words, and lines using the browser’s Intl.Segmenter API. It wraps each segment in a configurable HTML element for per-segment animation.

The text module makes text reveal and kinetic typography straightforward:

import { splitText } from 'animejs/text';

const split = splitText({
  text: 'Anime.js v4 makes text dance!',
  by: 'word',      // 'char' | 'word' | 'line' | 'all'
  tag: 'span',     // HTML element to wrap each segment
});

You can then animate the resulting nodes individually:

import { animate, stagger } from 'animejs';

animate(split.nodes, {
  translateY: { from: -20, to: 0 },
  opacity: { from: 0, to: 1 },
  duration: 600,
  delay: stagger(50), // Stagger each word/character
  ease: 'outQuad',
});

splitText Options

Draggable Interactions

Direct answer: createDraggable() from animejs/draggable enables drag, snap, flick, and throw interactions. It pairs with createSpring() for physics-based release easing and supports bounds, snap targets, and drag thresholds.

Draggable is a new module in v4 that provides full drag-and-drop interactions:

import { createDraggable, createSpring } from 'animejs';

const drag = createDraggable({
  el: '.card',
  container: '.stack',
  bounds: { x: [0, 400], y: [0, 400] },
  releaseEase: createSpring({ stiffness: 150, damping: 15 }),
  dragThreshold: 10,   // (v4.2.1+) Minimum px before drag starts
  onStart: () => {},
  onDrag: () => {},
  onDrop: () => {},
  onSnap: () => {},
});

// Later
drag.destroy();

Draggable Settings

createScope for Framework Integration

Direct answer: createScope() provides a scoped environment with helper methods like qs(), qsa(), and registerMethod(), plus a revert() method for cleanup – ideal for Svelte, React, or Vue component lifecycles.

Framework integration is a first-class concern in v4. createScope() eliminates manual query selector management and memory leaks:

import { createScope } from 'animejs/scope';

// Inside a Svelte onMount / React useEffect
const scope = createScope({ root: containerElement });

// Scoped query selectors
scope.qs('.card');    // Only within the root
scope.qsa('.item');   // All matching elements in root

// Register custom methods
scope.registerMethod('customAnimation', (el) => {
  animate(el, { scale: 1.2 });
});

// Cleanup on unmount
onDestroy(() => scope.revert());

WAAPI Integration

Direct answer: The WAAPI module (waapi from animejs) provides the same Anime.js syntax but drives animations through the browser’s native Web Animations API, producing a 3 KB bundle. It supports the same animate() signature, stagger(), and easing functions.

For projects where bundle size is critical, WAAPI integration offers a compelling alternative:

import { waapi, stagger } from 'animejs';

waapi.animate('span', {
  translate: '0 -2rem',
  delay: stagger(100),
  duration: 600,
  loop: true,
  alternate: true,
  ease: 'inOut(2)',
});

When to use WAAPI vs. the core engine:

Engine Configuration and Performance

Direct answer: The engine module exposes global settings including frame rate cap (up to 240 FPS in v4.3), default parameters, playback timing unit, and auto-pause behavior when the document is hidden.

Engine Settings

import { engine } from 'animejs';

engine.defaults = { duration: 500, ease: 'outQuad' }; // Global defaults
engine.useDefaultMainLoop = false;  // Disable built-in loop
engine.update();                     // Manual frame update
engine.pauseOnDocumentHidden = true; // Pause when tab hidden
engine.timeUnit = 'ms';             // 'ms' or 's'
engine.precision = 2;               // Decimal precision for values

Performance Benchmarks

Anime.js v4’s rendering engine has been optimized for large-scale animations:

Browser Support

Anime.js v4 does not support Internet Explorer.

Release History: v4.2 and v4.3

Direct answer: The v4.2 series (September 2025) added spring bounce, WAAPI eases, CSS variable values, and subpath imports. The v4.3 series (January–February 2026) added createLayout, bumped max FPS to 240, and shipped multiple bug fixes.

The library has been actively maintained throughout 2025 and 2026 with a rapid release cadence:

timeline
    title Anime.js v4 Release Timeline (2025-2026)
    April 2025 : v4.0.0 : Modular API rewrite
    September 2025 : v4.2.0 : Spring bounce, subpath imports
    October 2025 : v4.2.1 : SVG offset, dragThreshold
    January 2026 : v4.3.0 : createLayout, 240 FPS
    January 2026 : v4.3.1-3.5 : Bug fix series
    February 2026 : v4.3.6 : Scroll-sync layout

Further Reading and Resources

• Anime.js Official Website – Full documentation, live demos, and playground
• GitHub Repository: juliangarnier/anime – Source code, issues, and releases
• npm Package: animejs – Latest version and installation
• Anime.js v4 Breaking Changes Wiki – Official migration guide from v3 to v4
• DeepWiki API Reference – Community-maintained comprehensive API documentation
• Anime.js on libs.tech – Dependency analysis and bundle size breakdown

Anime.js is created and maintained by Julian Garnier and released under the MIT License. This guide was compiled from the official animejs.com documentation, the juliangarnier/anime GitHub repository, and community resources. Last updated May 2, 2026.