Animejs

Anime.js v4

Anime.js (animejs, v4.x) is a lightweight JavaScript animation engine for CSS properties, transforms, SVG, DOM attributes, and plain JS objects. v4 is a full API rewrite — there is no default anime() function anymore; everything is a named import.

import { animate, createTimeline, createTimer, stagger, onScroll, utils, svg, text } from 'animejs';

Docs: https://animejs.com/documentation — installed API truth lives in node_modules/animejs/dist/.

Core: animate()

animate('.square', {
  x: '17rem',                       // transform shorthand (x, y, rotate, scale, skew…)
  rotate: { from: -180, to: 0 },    // per-property from/to
  scale: [ { to: 1.25, duration: 200 }, { to: 1, duration: 300 } ], // keyframes
  opacity: 0.5,
  duration: 800,
  delay: stagger(100),              // stagger across targets
  ease: 'outElastic(1, .5)',        // NOTE: 'ease', not 'easing'; no 'ease' prefix in names
  loop: 3, alternate: true,         // v3 direction:'alternate' → alternate: true
  onComplete: (anim) => {},         // callbacks are onBegin/onUpdate/onComplete/onLoop
});

• Targets: CSS selector, element, NodeList, array, or plain object (animate(obj, { prop: 100, onUpdate: ... })).
• Playback controls on the returned animation: .play() .pause() .restart() .reverse() .seek(ms) .then() (awaitable).
• Eases are strings: 'out', 'inOutQuad', 'outElastic(amplitude, period)', 'cubicBezier(...)', linear(), steps(n), irregular(), or createSpring({ stiffness, damping }) passed as the ease value (physics-based, ignores duration).

Timelines

const tl = createTimeline({ defaults: { duration: 500 }, loop: true });
tl.add('.a', { x: 100 })
  .add('.b', { y: 50 }, '-=200')   // position: absolute ms, '-=x'/'+=x', or labels
  .label('mid')
  .add('.c', { rotate: 360 }, 'mid')
  .sync(otherAnimationOrTimeline); // v3 nested anime instances → .sync()

Scroll, draggable, scope

animate('.el', { x: 200, autoplay: onScroll({ container: '.scroll', enter: 'bottom top', leave: 'top bottom', sync: true }) });
createDraggable('.el', { container: '.area', snap: 100 });

For React/Vue/SSR, wrap in a scope tied to a root ref — required for cleanup and media queries:

useEffect(() => {
  const scope = createScope({ root }).add(() => { animate('.logo', { rotate: 360 }); });
  return () => scope.revert();
}, []);

SVG and text

animate(svg.createDrawable('path'), { draw: '0 1' });        // line drawing
animate('#shape', { points: svg.morphTo('#shape2') });       // morph
animate('.el', svg.createMotionPath('path'));                // follow a path
const { chars, words, lines } = text.split('h1', { chars: true });
animate(chars, { y: [16, 0], opacity: [0, 1], delay: stagger(30) });

Performance picks

• waapi.animate(...) — same syntax, hardware-accelerated Web Animations API; prefer for simple transform/opacity animations.
• createAnimatable('.el', { x: 200 }) — for values driven every frame (cursor followers); far cheaper than re-triggering animate().
• createTimer({ duration, onUpdate }) — clock without targets (replaces empty-target anime() hacks).

utils (grab-bag, all importable via utils.)

utils.get(target, prop, unit) reads current values, utils.set(targets, props) sets instantly, utils.remove(targets) stops animations, plus random, randomPick, shuffle, clamp, round, snap, wrap, mapRange, lerp, damp, degToRad/radToDeg, padStart/padEnd, roundPad, sync, keepTime, createSeededRandom. Chainable: utils.clamp(0, 100).round(2) returns a composed function.

v3 → v4 migration (the usual breakages)

Full API surface (every export, grouped by module): references/api.md.