Anime.js v4

Modern JavaScript animation library. V4 is a complete rewrite — animate() not anime().

Installation

npm install animejs

import { animate, createTimeline, stagger, utils, onScroll, createDraggable, splitText, createScope, createLayout, waapi, svg, eases, cubicBezier, spring, engine } from 'animejs';

CDN: <script src="https://cdn.jsdelivr.net/npm/animejs@4/dist/anime.min.js"></script> → const { animate } = anime;

V3 → V4 Migration (Critical)

If you see ANY V3 pattern, the code MUST be migrated.

V4 Easing Names

Drop the "ease" prefix: easeOutExpo → outExpo, easeInOutQuad → inOutQuad. linear unchanged. Full list → references/easings.md.

API Reference

Load specific reference file for detailed params, methods, callbacks, and examples.

Common Patterns

Staggered entrance

import { animate, stagger } from 'animejs';
animate('.item', {
  y: [-20, 0], opacity: [0, 1],
  delay: stagger(80, { from: 'center' }),
  ease: 'outExpo', duration: 600,
});

Timeline sequence

import { createTimeline } from 'animejs';
const tl = createTimeline({ defaults: { duration: 750, ease: 'outExpo' } });
tl.add('.a', { x: '15rem' }, 0)
  .add('.b', { x: '15rem' }, '<')         // starts with previous
  .add('.c', { x: '15rem' }, '<-=500');    // 500ms before previous starts

Time positions: 0 (absolute ms), '<' (prev start), '<<' (prev end), '>>' (prev end), '<+=200' / '<-=200' (offset from prev start), '>>=200' (offset from prev end), 'label' / 'label+=500'.

Scroll-linked animation

import { animate, onScroll } from 'animejs';
animate('.progress', {
  scaleX: [0, 1],
  autoplay: onScroll({ target: '.content', enter: 'top bottom', leave: 'bottom top' })
});

Red Flags — V3 Code Detected

Stop and migrate if you see ANY of these:

• anime({ or anime.timeline() — V3 constructor
• translateX, translateY, translateZ — use x, y, z
• easeIn*, easeOut*, easeInOut* prefix — drop "ease"
• anime.stagger(), anime.set(), anime.get() — named imports / utils
• direction: 'alternate' / direction: 'reverse' — use booleans
• easing: parameter — V4 uses ease:
• import anime from 'animejs' — use named imports { animate }
• "anime is not a function" / "anime is not defined" — V4 has no default export
• Animating width/height directly — use scaleX/scaleY or x/y for performance
• Missing autoplay for scroll — pass autoplay: onScroll({...})
• Not cleaning up in React — use createScope() + .revert() in cleanup