anime.js v4

When to use this

• You need one library that animates DOM style props, SVG attributes, CSS custom properties, and plain JS object values with the same timeline engine, without pulling in GSAP's larger core.
• You are migrating an existing v3 codebase (anime({...}), anime.timeline(), anime.stagger()) and need the v4 rename map, not a "getting started" tutorial.
• You want SVG line-drawing or motion-path effects with a small dependency and are fine with anime's engine instead of GSAP's DrawSVGPlugin/MotionPathPlugin.
• You need tight control over playback (seek, reverse, speed) via a returned instance with a stable, documented method set.
• Do NOT use this when you need scroll-linked scrubbing, pinning, or FLIP-style layout transitions as first-class features. GSAP's ScrollTrigger and Flip plugins (see gsap-scrolltrigger, gsap-flip-layout) are purpose-built for that; anime.js has no direct equivalent.

Mental model

anime.js v4 is a from-scratch rewrite, not an incremental update. The whole library is now ESM-first, tree-shakeable named exports instead of one default anime object. Internally it runs a single global engine tick (requestAnimationFrame driven, with a fallback timer) that advances every active animation's internal clock and writes computed values directly to the target's property each frame. There is no virtual DOM diffing: it reads the target's current value once at animation creation (or uses from), computes the interpolated value per frame using the selected easing function, and assigns it directly (el.style.transform, el.setAttribute(...), or a plain object property).

Timelines in v4 (createTimeline) are a sequencing container: children are animate() calls chained onto the timeline object, each with its own position on the parent's time axis. Position logic (relative offsets, labels, overlaps) works the same conceptually as GSAP's position parameter, but the syntax is anime's own (a second argument like '-=200', '<', '+=100', or a label string).

The biggest structural change from v3 is the animation "value" model. v3 accepted a bag of special keys mixed into the same object as the targets config (duration, easing, delay alongside CSS props). v4 separates targets and properties are still one object, but property values are now normalized through a unified keyframe/tween value model that accepts numbers, unit strings, functions (target, index, total) => value, and per-property keyframe arrays uniformly, whereas v3 had inconsistent per-feature support for functions vs arrays. stagger() in v4 is a function factory that returns a per-target value resolver, usable anywhere a property or timing value is accepted, not just inside object literals.

SVG support moved into a dedicated svg namespace (svg.createDrawable, svg.createMotionPath) instead of being auto-detected magic on arbitrary attribute strings. This makes SVG behavior explicit and means v3 code that relied on animating strokeDashoffset directly, or the old anime.path() helper, needs a rewrite, not a rename.