Animejs

anime.js (v4)

anime.js is a fast, lightweight JavaScript animation library with a small, composable API. v4 is a ground-up rewrite: it is modular and ESM-first — you import named functions (animate, createTimeline, …) rather than calling a single default anime() object as in v3. Always write v4-style code unless the user explicitly pins v3.

When to use this skill

• "Animate this element / these cards / this SVG."
• "Make a timeline that sequences several animations."
• "Add a staggered entrance / scroll-reveal / hover effect."
• "Morph this SVG path into that one" or "draw this SVG line on scroll."
• "Make this element draggable with momentum / springy motion."
• "Animate text in character by character."
• Any request to add motion to a web page, or to debug/upgrade existing anime.js.

If the user is on v3 (default anime({...}) syntax) and wants to upgrade, see the Migration notes below.

Install / import

npm (recommended, ESM):

npm install animejs

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

CDN — ES modules (no build step):

<script type="module">
  import { animate, stagger } from 'https://esm.sh/animejs@4';
  animate('.box', { x: 200, duration: 800 });
</script>

CDN — classic UMD global (anime namespace; methods hang off it):

<script src="https://cdn.jsdelivr.net/npm/animejs@4"></script>
<script>
  anime.animate('.box', { x: 200, rotate: '1turn', duration: 800 });
</script>

TypeScript types ship with the package — no @types needed.

Core mental model

Every animatable thing is created by a factory function that returns an object with playback controls (.play(), .pause(), .restart(), .seek(), .reverse(), plus a .then()/completed promise). You target CSS selectors, DOM nodes, NodeLists, or plain JS objects.

animate(targets, {
  // properties to animate (CSS, transforms, attributes, or object keys)
  x: 320,                         // translateX shorthand
  rotate: { from: -180 },         // per-property keyframe object
  opacity: [0, 1],               // [from, to]
  // timing & behavior
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true,
  // callbacks
  onComplete: self => console.log('done', self),
});

Key shorthands: x/y/z (translate), rotate, scale, skew. Values can be numbers (px assumed), units ('50%', '2rem', '1turn'), [from, to] arrays, { from, to } objects, function values (el, i) => ..., or relative strings ('+=100').

The v4 modules

For concrete, copy-pasteable snippets of each module, read reference.md. A complete runnable demo (CDN, no build) is in examples/index.html.

Common recipes

Timeline (sequence + overlap):

import { createTimeline, stagger } from 'animejs';

const tl = createTimeline({ defaults: { duration: 600, ease: 'outQuad' } });
tl.add('.title', { y: [40, 0], opacity: [0, 1] })
  .add('.card', { scale: [0.8, 1], opacity: [0, 1], delay: stagger(80) }, '-=200') // overlap by 200ms
  .add('.cta',  { opacity: [0, 1] });

Stagger grid:

animate('.cell', {
  scale: [0, 1],
  delay: stagger(50, { grid: [10, 10], from: 'center' }),
});

Scroll-triggered reveal:

import { animate, onScroll } from 'animejs';
animate('.section', {
  opacity: [0, 1], y: [50, 0],
  autoplay: onScroll({ enter: 'bottom-=100 top', sync: 0.5 }),
});

SVG line drawing:

import { animate, svg } from 'animejs';
animate(svg.createDrawable('.path'), { draw: '0 1', duration: 2000, ease: 'inOutQuad' });

Draggable with physics:

import { createDraggable } from 'animejs';
createDraggable('.box', { container: '.bounds', releaseStiffness: 40, snap: 50 });

Migrating from v3

• v3 anime({ targets, ... }) → v4 animate(targets, { ... }) (targets is the first arg, not a param).
• v3 easing: 'easeInOutQuad' → v4 ease: 'inOutQuad' (renamed + shorter names).
• v3 anime.timeline() → v4 createTimeline(); .add(params, offset) → .add(targets, params, offset).
• v3 anime.stagger() → v4 stagger() (named import).
• v3 anime.set() / anime.random() → v4 utils.set() / utils.random().
• loop/direction: 'alternate' → loop + alternate: true.
• Full guide: https://animejs.com/documentation/migrating-from-v3.

Tips & gotchas

• Prefer transforms (x, y, scale, rotate) and opacity for smooth, GPU-friendly motion; animating width/top/left triggers layout.
• Use ease: createSpring({ stiffness, damping }) for natural motion instead of guessing cubic-bezier values.
• In React/Vue/Svelte, wrap creation in an effect and call scope.revert() (or the returned animation's .revert()) on cleanup so you don't leak timers across re-renders. createScope exists for exactly this.
• Respect prefers-reduced-motion: gate non-essential animation behind a media query check.
• Animations autoplay by default; pass autoplay: false and call .play() to control timing, or autoplay: onScroll(...) to tie it to scroll.

Credits

Powered by anime.js (v4, MIT) by Julian Garnier. This skill documents and wraps the library for the Claude Agent Skills format; all credit for the animation engine belongs to its author and contributors.