Animejs

Subpath imports (tree-shakable, smaller bundles):

import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { stagger } from 'animejs/utils';
import { svg } from 'animejs/svg';
import { createScope } from 'animejs/scope';
import { onScroll } from 'animejs/events';
import { createDraggable } from 'animejs/draggable';

WAAPI lightweight alternative (3KB vs 10KB full):

import { waapi } from 'animejs';
const animation = waapi.animate(targets, parameters);

v3 to v4 Migration Reference

CRITICAL differences — always use v4 syntax unless told otherwise.

v3 example:

import anime from 'animejs/lib/anime.es.js';
anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
});

v4 equivalent:

import { animate } from 'animejs';
animate('.box', {
  x: 250,
  rotate: '1turn',
  ease: 'inOutQuad',
  alternate: true,
  loop: true
});

Core animate() API

const animation = animate(targets, parameters);

Targets

// CSS selector
animate('.card', { opacity: 0 });

// DOM element
animate(document.querySelector('#hero'), { y: -20 });

// NodeList / array of elements
animate(document.querySelectorAll('.item'), { x: 100 });

// Array of elements
animate([el1, el2, el3], { scale: 1.2 });

// Plain JavaScript object (non-DOM)
const obj = { count: 0 };
animate(obj, {
  count: 100,
  onUpdate: () => console.log(Math.round(obj.count))
});

Animatable Properties

animate('.el', {
  // CSS transforms (shorthand preferred)
  x: 100,           // translateX — default unit: px
  y: -50,           // translateY — default unit: px
  z: 0,             // translateZ — default unit: px
  rotate: '1turn',  // or 360 (degrees), '3.14rad'
  rotateX: 45,
  rotateY: 45,
  scale: 1.5,
  scaleX: 2,
  scaleY: 0.5,
  skew: 15,
  skewX: 10,
  skewY: 10,
  perspective: '500px',

  // CSS properties
  opacity: 0,
  width: '100%',
  height: '200px',
  backgroundColor: '#ff0000',
  color: 'rgb(255, 0, 0)',
  borderRadius: '50%',
  fontSize: '2rem',

  // CSS variables
  '--custom-prop': '100px',

  // HTML attributes
  'data-value': 100,

  // SVG attributes
  cx: 50,
  r: 10,
  fill: '#ff0000',
});

Transform Property Reference

Tween Value Types

animate('.el', {
  x: 100,              // Numeric (uses default unit)
  x: '10rem',          // With unit
  x: '+=50',           // Relative add
  x: '-=50',           // Relative subtract
  x: '*=2',            // Relative multiply
  opacity: [0, 1],     // From → To (array shorthand)
  x: { from: -100, to: 100 },  // Explicit from/to object
  backgroundColor: '#ff0000',   // Color (hex, rgb, hsl)
  x: (target, index, length) => index * 50,  // Function-based
});

Function-based values — callback receives (target, index, length):

animate('.card', {
  x: (el, i, total) => (i - total / 2) * 100,
  delay: (el, i) => i * 50,
  rotate: (el, i, total) => (i / total) * 360,
});
// Recalculate without recreating animation:
animation.refresh();

Playback Parameters

animate('.el', {
  x: 100,
  duration: 1000,      // ms, default: 500
  delay: 200,          // ms before start
  loopDelay: 500,      // ms pause between loops (v4) — was endDelay in v3
  ease: 'outQuad',     // easing function
  loop: true,          // infinite loop
  loop: 3,             // repeat 3 times (plays 4 total in v4)
  alternate: true,     // reverse direction each loop
  reversed: false,     // start in reverse
  autoplay: true,      // start immediately (default: true)
  frameRate: 60,       // custom fps cap
  playbackRate: 1,     // speed multiplier (0.5 = half speed)
  playbackEase: 'linear', // easing applied across full playback
  composition: 'replace', // 'replace' | 'add' | 'blend'
});

Callbacks

animate('.el', {
  x: 100,
  onBegin: (anim) => console.log('started'),
  onComplete: (anim) => console.log('done'),
  onUpdate: (anim) => console.log(anim.progress),
  onLoop: (anim) => console.log('looped'),
  onPause: (anim) => console.log('paused'),
  onBeforeUpdate: (anim) => {},  // JS only, before value updates
  onRender: (anim) => {},        // JS only, during render phase
});

// Promise-like chaining
animate('.el', { x: 100 }).then(() => {
  animate('.el', { y: 100 });
});

Animation Controls

const anim = animate('.el', { x: 100, autoplay: false });

anim.play();          // Play forward from current position
anim.pause();         // Pause at current position
anim.resume();        // Resume from paused position (respects direction)
anim.restart();       // Reset to start and play
anim.reverse();       // Play backward
anim.alternate();     // Toggle direction
anim.complete();      // Jump to end state
anim.reset();         // Return to initial values, stop
anim.cancel();        // Stop and clear
anim.revert();        // Undo all changes, return to DOM original
anim.seek(500);       // Jump to 500ms position
anim.stretch(2000);   // Change total duration to 2000ms
anim.refresh();       // Recalculate function-based values

// Properties
anim.duration;        // Total duration in ms
anim.currentTime;     // Current position in ms
anim.progress;        // 0 to 1
anim.paused;          // boolean
anim.completed;       // boolean

Easing Functions

Built-in Named Easings

// Format: 'in', 'out', 'inOut', 'outIn' + curve name
// Parametric: pass strength value like out(3) or inOut(2)