Animejs

Anime.js v4 Skill

Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.

Installation

NPM

bashCopy code
npm install animejs

ES Modules Import

javascriptCopy code
import { animate } from 'animejs';

CDN (ES Modules)

javascriptCopy code
import { animate } from 'https://esm.sh/animejs';

CDN (UMD)

htmlCopy code
<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
<script>
  const { animate } = anime;
</script>

Core Concepts

Anime.js v4 is modular and tree-shakeable. Import only what you need:

javascriptCopy code
// Full import
import { animate, createTimeline, stagger, createDraggable } from 'animejs';

// Standalone modules for smaller bundles
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createTimer } from 'animejs/timer';

Documentation Sitemap

The complete anime.js v4 documentation structure:

Getting Started

• Installation (NPM, CDN, Direct download)
• Module imports (ES Modules, CommonJS, UMD)
• Using with vanilla JS
• Using with React

Timer (createTimer)

• Playback Settings: delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate
• Callbacks: onBegin, onComplete, onUpdate, onLoop, onPause, then()
• Methods: play(), reverse(), pause(), restart(), alternate(), resume(), complete(), reset(), cancel(), revert(), seek(), stretch()
• Properties: currentTime, progress, paused, completed, etc.

Animation (animate)

• Targets: CSS Selector, DOM Elements, JavaScript Objects, Array of targets
• Animatable Properties: CSS Properties, CSS transforms, CSS Variables, JS Object properties, HTML Attributes, SVG Attributes
• Tween Value Types: Numerical, Unit conversion, Relative (+=, -=, *=), Color, Color function, CSS variable, Function based
• Tween Parameters: to, from, delay, duration, ease, composition, modifier
• Keyframes: Tween values, Tween parameters, Duration based, Percentage based
• Playback Settings: delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase, persist
• Callbacks: onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
• Methods: play(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), reset(), seek(), stretch(), refresh()

Timeline (createTimeline)

• Add timers, Add animations, Sync WAAPI animations, Sync timelines, Call functions
• Time Position: Absolute (ms), Relative (<, >, +=, -=), Labels
• Playback Settings: defaults, delay, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase
• Callbacks: onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
• Methods: add(), set(), sync(), label(), remove(), call(), init(), play(), reset(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), seek(), stretch(), refresh()

Animatable (createAnimatable)

• Settings: unit, duration, ease, modifier
• Methods: Getters, Setters, revert()

Draggable (createDraggable)

• Axes Parameters: x, y, snap, modifier, mapTo
• Settings: trigger, container, containerPadding, containerFriction, releaseContainerFriction, releaseMass, releaseStiffness, releaseDamping, velocityMultiplier, minVelocity, maxVelocity, releaseEase, dragSpeed, dragThreshold, scrollThreshold, scrollSpeed, cursor
• Callbacks: onGrab, onDrag, onUpdate, onRelease, onSnap, onSettle, onResize, onAfterResize
• Methods: disable(), enable(), setX(), setY(), animateInView(), scrollInView(), stop(), reset(), revert(), refresh()

Layout (createLayout) - NEW

• Usage: Specifying a root, CSS display animation, Staggered layout, DOM order animation, Enter/Exit layout animation, Swap parent animation, Modal dialog animation
• Settings: children, delay, duration, ease, properties
• States: enterFrom, leaveTo, swapAt
• Methods: record(), animate(), update(), revert()
• Layout id attribute, Callbacks, Properties, Common gotchas

Scope (createScope)

• Add constructor function, Register method function
• Parameters: root, defaults, mediaQueries
• Methods: add(), addOnce(), keepTime(), revert(), refresh()

Events / Scroll (onScroll)

• Settings: container, target, debug, axis, repeat
• Thresholds: Numeric values, Positions shorthands, Relative position values, Min max
• Synchronisation Modes: Method names, Playback progress, Smooth scroll, Eased scroll
• Callbacks: onEnter, onEnterForward, onEnterBackward, onLeave, onLeaveForward, onLeaveBackward, onUpdate, onSyncComplete, onResize
• Methods: link(), refresh(), revert()

SVG Utilities

• morphTo() - SVG shape morphing
• createDrawable() - SVG line drawing animation
• createMotionPath() - Motion path animation

Text Utilities (splitText)

• Settings: lines, words, chars, debug, includeSpaces, accessible
• Split Parameters: class, wrap, clone
• HTML template support
• Methods: addEffect(), revert(), refresh()

Utilities

• stagger() - Time/values/timeline staggering with grid support
• $() - Query selector utility
• get() / set() - Get/set CSS property values
• cleanInlineStyles() - Remove inline styles
• remove() - Remove animations from targets
• sync() - Synchronize animations
• keepTime() - Time keeper utility
• random() / createSeededRandom() / randomPick() / shuffle() - Random utilities
• round() / clamp() / snap() / wrap() - Math utilities
• mapRange() / lerp() / damp() - Interpolation utilities
• roundPad() / padStart() / padEnd() - String padding
• degToRad() / radToDeg() - Angle conversion
• Chain-able utilities

Easings

• Built-in: linear, easeIn, easeOut, easeInOut (with Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Back, Elastic, Bounce variants)
• Custom: Cubic Bezier, Linear (multi-point), Steps, Irregular
• Spring: createSpring({ stiffness, damping, mass, velocity })

WAAPI (Web Animation API)

• When to use WAAPI vs JS animation
• Hardware-accelerated animations
• Improvements to native WAAPI
• API differences (iterations, direction, easing, finished)
• waapi.convertEase()

Engine Configuration

• Parameters: timeUnit (ms/s), speed, fps, precision, pauseOnDocumentHidden
• Methods: update(), pause(), resume()
• Engine defaults

Quick Reference

Basic Animation

javascriptCopy code
import { animate } from 'animejs';

animate('.element', {
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  ease: 'outExpo'
});

Timeline

javascriptCopy code
import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 500 } });
tl.add('.box1', { x: 100 })
  .add('.box2', { x: 100 }, '<')  // Start with previous
  .add('.box3', { x: 100 }, '-=200');  // 200ms before end

Stagger

javascriptCopy code
import { animate, stagger } from 'animejs';

animate('.item', {
  translateY: [-20, 0],
  opacity: [0, 1],
  delay: stagger(100, { from: 'center' }),
  duration: 600
});

Scroll Animation

javascriptCopy code
import { animate, onScroll } from 'animejs';

animate('.element', {
  translateX: [0, 500],
  autoplay: onScroll({
    target: '.element',
    sync: true
  })
});

SVG Line Drawing

javascriptCopy code
import { animate, createDrawable } from 'animejs';

animate(createDrawable('path'), {
  draw: ['0 0', '0 1'],
  duration: 2000,
  ease: 'inOutQuad'
});

Draggable

javascriptCopy code
import { createDraggable, createSpring } from 'animejs';

createDraggable('.draggable', {
  container: '.container',
  releaseEase: createSpring({ stiffness: 200, damping: 20 })
});

Function-Based Values

javascriptCopy code
animate('.element', {
  translateX: (el, i, total) => i * 50,
  rotate: (el, i) => anime.random(-180, 180),
  delay: (el, i) => i * 100
});

Keyframes

javascriptCopy code
animate('.element', {
  translateX: [
    { to: 100, duration: 500 },
    { to: 0, duration: 500, delay: 200 }
  ],
  rotate: ['0turn', '1turn', '0turn']
});

React Integration

jsxCopy code
import { useRef, useEffect } from 'react';
import { animate, createScope } from 'animejs';

function AnimatedComponent() {
  const root = useRef(null);
  const scope = useRef(null);

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

  return (
    <div ref={root}>
      <div className="box" />
    </div>
  );
}

Bundle Sizes (Minified + Gzipped)

Additional Resources

• Official Documentation: https://animejs.com/documentation
• Easing Editor: https://animejs.com/easing-editor
• CodePen Examples: https://codepen.io/collection/Poerqa
• GitHub: https://github.com/juliangarnier/anime

For detailed API parameters, code examples, and advanced patterns, see the references files:

• references/api-reference.md - Complete API documentation
• references/examples.md - Common animation patterns and recipes