animejs

JavaScript animation engine

weekly downloads543K

versionv4.3.6

licenseMIT

categoryanimation

animeanimejsanime.jstimeranimationtimelineanimatabledraggablescopeenginescrolleasingscubic-bezierspringsplitTextCSSSVGWAAPICanvasWebGL

Overview

anime.js is a production-grade JavaScript animation engine designed to animate CSS properties, SVG attributes, DOM elements, and plain JavaScript objects through a unified API. Originally created to fill the gap between basic CSS transitions and heavyweight animation frameworks, it provides precise control over timing, easing, and sequencing while maintaining a small footprint with ESM tree-shaking support.

The library addresses common animation challenges developers face: coordinating multiple element animations, creating complex timelines, handling SVG morphing and motion paths, and managing interactive drag behaviors. With over 500,000 weekly downloads, it's used in production by teams building interactive dashboards, animated marketing sites, data visualizations, and web applications requiring smooth UI transitions without React or framework coupling.

Version 4 represents a complete rewrite focused on performance and memory efficiency. The API supports variable framerates per animation, additive tweening for blending concurrent animations, and advanced stagger functions for sequenced delays. Unlike native Web Animations API, anime.js provides cross-browser consistency, timeline composition, and the ability to animate non-DOM objects like canvas coordinates or Three.js properties.

Developers choose anime.js when they need more control than CSS animations offer but want to avoid the bundle size or licensing costs of commercial alternatives. It excels at SVG animations, coordinated multi-element sequences, and scenarios requiring pause/play/reverse/seek controls that CSS alone cannot provide.

Quick Start

typescript

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

// Animate multiple elements with staggered timing
const squareAnimation = animate('.card', {
  translateY: [-50, 0],
  opacity: [0, 1],
  rotate: { from: -10, to: 0 },
  duration: 800,
  delay: stagger(100, { from: 'first', ease: 'outQuad' }),
  ease: 'outExpo'
});

// Create a coordinated timeline with multiple sequences
const timeline = createTimeline({
  loop: true,
  onLoop: (tl) => console.log('Loop iteration:', tl.iteration)
});

timeline
  .add('.header', {
    scale: [0.9, 1],
    opacity: [0, 1],
    duration: 600
  })
  .add('.subtitle', {
    translateX: [-30, 0],
    opacity: [0, 1],
    duration: 500
  }, '-=300') // Start 300ms before previous animation ends
  .add('.button', {
    backgroundColor: ['#3b82f6', '#8b5cf6'],
    duration: 1200,
    ease: 'inOutSine'
  });

// Animate JavaScript object (useful for canvas/WebGL)
const coords = { x: 0, y: 0, rotation: 0 };

animate(coords, {
  x: 500,
  y: 300,
  rotation: 360,
  duration: 2000,
  ease: 'inOutCubic',
  onUpdate: () => {
    // Draw at updated coordinates
    drawOnCanvas(coords.x, coords.y, coords.rotation);
  }
});

// Control playback programmatically
document.querySelector('#pauseBtn').addEventListener('click', () => {
  squareAnimation.pause();
});

document.querySelector('#reverseBtn').addEventListener('click', () => {
  squareAnimation.reverse();
});

function drawOnCanvas(x, y, rotation) {
  const ctx = document.querySelector('canvas').getContext('2d');
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate((rotation * Math.PI) / 180);
  ctx.fillRect(-25, -25, 50, 50);
  ctx.restore();
}

Use Cases

Interactive UI Microinteractions: Animate modal entrances, button hover states, form validation feedback, and loading indicators with precise timing control. Stagger functions create cascading effects for list items or card grids appearing sequentially.

SVG Data Visualizations: Morph chart shapes on data updates, animate line drawing for progressive graph rendering, follow motion paths for particle effects, or create interactive infographics where elements respond to scroll position using the Scroll Observer API.

Onboarding and Tutorial Flows: Build step-by-step product tours with timeline-controlled animations that pause, rewind, or skip ahead. Coordinate pointer movements, highlight effects, and tooltip appearances with callback-driven sequencing.

Canvas and WebGL Integration: Animate properties of JavaScript objects controlling canvas drawings or Three.js scene parameters. Update particle system coordinates, camera positions, or shader uniforms through anime.js tween engine instead of manual requestAnimationFrame loops.

Drag-and-Drop Interfaces: Use the Draggable API for custom sortable lists, slider controls, or map panning with physics-based momentum, snap-to-grid constraints, and throw gestures beyond basic HTML5 drag-and-drop capabilities.

Pros & Cons

Pros

+Lightweight ESM-first architecture with tree-shaking reduces bundle size; ~9KB minified for basic animations compared to 50KB+ for feature-equivalent GSAP bundles
+Unified API animates CSS, SVG, DOM, and plain objects with automatic unit conversion (px, %, em, colors) and transform decomposition, eliminating multi-library integration
+Advanced stagger and timeline features with additive tweening allow complex multi-element choreography without performance degradation or jank at 60fps
+Framework-agnostic with no dependencies means it works in vanilla JS, React, Vue, Svelte without adapters; Scroll and Draggable APIs handle common interaction patterns built-in
+Fine-grained playback controls (pause, reverse, seek, speed adjustment) and lifecycle callbacks (onUpdate, onLoop, onTick) enable scrubbing timelines and syncing with external state

Cons

−Documentation for v4 API changes is still catching up; migrating from v3 requires refactoring animate() calls and timeline syntax with limited migration guides
−No official React hooks or Vue composables mean manual integration with component lifecycles; developers must handle cleanup and ref management themselves
−Performance degrades with 1000+ simultaneous DOM animations despite optimizations; not ideal for particle systems or game engines where canvas/WebGL direct manipulation is faster
−Spring physics easings lack the configurability of dedicated spring libraries like react-spring; no natural frequency or damping ratio tuning, just presets
−TypeScript definitions sometimes lag actual API surface area; generics for target types and animation parameters can be verbose or require manual casting

Alternatives

framer-motionv12.34.2

A simple and powerful JavaScript animation library

animationreact animationreact

22.4M / week

gsapv3.14.2

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,

animationGSAPGreenSock

1.8M / week

Comparisons

animejs vs gsap

animation

Install

bash

npm install animejs

bash

pnpm add animejs

bash

bun add animejs

Overview

Quick Start

typescript

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

// Animate multiple elements with staggered timing
const squareAnimation = animate('.card', {
  translateY: [-50, 0],
  opacity: [0, 1],
  rotate: { from: -10, to: 0 },
  duration: 800,
  delay: stagger(100, { from: 'first', ease: 'outQuad' }),
  ease: 'outExpo'
});

// Create a coordinated timeline with multiple sequences
const timeline = createTimeline({
  loop: true,
  onLoop: (tl) => console.log('Loop iteration:', tl.iteration)
});

timeline
  .add('.header', {
    scale: [0.9, 1],
    opacity: [0, 1],
    duration: 600
  })
  .add('.subtitle', {
    translateX: [-30, 0],
    opacity: [0, 1],
    duration: 500
  }, '-=300') // Start 300ms before previous animation ends
  .add('.button', {
    backgroundColor: ['#3b82f6', '#8b5cf6'],
    duration: 1200,
    ease: 'inOutSine'
  });

// Animate JavaScript object (useful for canvas/WebGL)
const coords = { x: 0, y: 0, rotation: 0 };

animate(coords, {
  x: 500,
  y: 300,
  rotation: 360,
  duration: 2000,
  ease: 'inOutCubic',
  onUpdate: () => {
    // Draw at updated coordinates
    drawOnCanvas(coords.x, coords.y, coords.rotation);
  }
});

// Control playback programmatically
document.querySelector('#pauseBtn').addEventListener('click', () => {
  squareAnimation.pause();
});

document.querySelector('#reverseBtn').addEventListener('click', () => {
  squareAnimation.reverse();
});

function drawOnCanvas(x, y, rotation) {
  const ctx = document.querySelector('canvas').getContext('2d');
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate((rotation * Math.PI) / 180);
  ctx.fillRect(-25, -25, 50, 50);
  ctx.restore();
}

Use Cases

Pros & Cons

Pros

+Lightweight ESM-first architecture with tree-shaking reduces bundle size; ~9KB minified for basic animations compared to 50KB+ for feature-equivalent GSAP bundles
+Unified API animates CSS, SVG, DOM, and plain objects with automatic unit conversion (px, %, em, colors) and transform decomposition, eliminating multi-library integration
+Advanced stagger and timeline features with additive tweening allow complex multi-element choreography without performance degradation or jank at 60fps
+Framework-agnostic with no dependencies means it works in vanilla JS, React, Vue, Svelte without adapters; Scroll and Draggable APIs handle common interaction patterns built-in
+Fine-grained playback controls (pause, reverse, seek, speed adjustment) and lifecycle callbacks (onUpdate, onLoop, onTick) enable scrubbing timelines and syncing with external state

Cons

−Documentation for v4 API changes is still catching up; migrating from v3 requires refactoring animate() calls and timeline syntax with limited migration guides
−No official React hooks or Vue composables mean manual integration with component lifecycles; developers must handle cleanup and ref management themselves
−Performance degrades with 1000+ simultaneous DOM animations despite optimizations; not ideal for particle systems or game engines where canvas/WebGL direct manipulation is faster
−Spring physics easings lack the configurability of dedicated spring libraries like react-spring; no natural frequency or damping ratio tuning, just presets
−TypeScript definitions sometimes lag actual API surface area; generics for target types and animation parameters can be verbose or require manual casting