Anime.js - JavaScript Animation Engine

Anime.js - JavaScript Animation Engine

Research Date: January 31, 2026 Source URL: https://animejs.com GitHub Repository: https://github.com/juliangarnier/anime Documentation: https://animejs.com/documentation npm Package: https://www.npmjs.com/package/animejs Version at Research: v4.3.5 License: MIT

Overview

Anime.js is a fast, multipurpose, and lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects. Version 4 introduces a complete API redesign with ES module imports, improved timeline controls, and enhanced performance.

Core Value Proposition: Enable declarative, chainable animations with minimal code while supporting complex staggering, timelines, and easing functions across any animatable web property.

Problem Addressed

Key Statistics (as of January 31, 2026)

Key Features

1. ES Module Architecture (v4)

• Tree-shakeable Imports: Import only what you need (animate, stagger, createTimeline)
• Named Exports: Clean API surface with explicit function imports
• TypeScript Support: Full type declarations included

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

2. Target-Based Animation

• CSS Selectors: Animate elements matching any valid selector
• DOM Elements: Direct element or NodeList references
• JavaScript Objects: Animate any numeric object properties
• Mixed Targets: Combine different target types in single animation

3. Property Animation

• CSS Properties: All animatable CSS including transforms, colors, dimensions
• SVG Attributes: Native SVG property support (path d, stroke-dasharray, etc.)
• DOM Attributes: Any numeric DOM attribute
• Object Properties: Arbitrary JavaScript object values

4. Stagger System

• Linear Stagger: Incremental delays across targets
• Grid Stagger: 2D staggering for grid layouts
• From Options: Start from first, last, center, or specific index
• Easing Integration: Apply easing curves to stagger distribution

animate('.item', {
  translateX: 250,
  delay: stagger(100, { from: 'center', ease: 'outQuad' })
});

5. Timeline API

• Sequential Composition: Chain animations with add()
• Parallel Composition: Overlap animations with offset parameters
• Nested Timelines: Compose complex sequences from simpler ones
• Default Parameters: Shared properties across all timeline children

const tl = createTimeline({ defaults: { duration: 400, ease: 'outQuad' }});
tl.add('.el1', { translateX: 250 })
  .add('.el2', { translateY: 100 }, '-=200');

6. Playback Controls

• play() / pause() / resume(): Standard playback control
• reverse(): Play animation backwards
• seek(time): Jump to specific time position
• restart(): Reset and play from beginning
• Playback Rate: Speed up or slow down animations

7. Easing Functions

• Built-in Easings: 30+ named easings (linear, quad, cubic, quart, quint, sine, expo, circ, back, elastic, bounce)
• Directional Variants: in, out, inOut for each easing type
• Custom Bezier: Define custom cubic-bezier curves
• Spring Physics: Physics-based spring animations
• Stepped Easing: Discrete step transitions

8. Callbacks and Promises

• Event Callbacks: onBegin, onUpdate, onLoop, onComplete
• Promise-based: Async/await support for animation completion
• Progress Values: Access current progress in callbacks

Technical Architecture

Application Code
      |
      v
+------------------------------------------+
|           Anime.js Engine                 |
|  +------------------------------------+  |
|  |         Target Resolution          |  |
|  |  - CSS selector parsing            |  |
|  |  - NodeList handling               |  |
|  |  - Object property mapping         |  |
|  +------------------------------------+  |
|                   |                       |
|                   v                       |
|  +------------------------------------+  |
|  |         Property Parser            |  |
|  |  - CSS value parsing               |  |
|  |  - Unit conversion                 |  |
|  |  - Color interpolation (RGB/HSL)   |  |
|  |  - Transform decomposition         |  |
|  +------------------------------------+  |
|                   |                       |
|                   v                       |
|  +------------------------------------+  |
|  |         Animation Scheduler        |  |
|  |  - requestAnimationFrame loop      |  |
|  |  - Easing calculation              |  |
|  |  - Progress interpolation          |  |
|  |  - Stagger delay management        |  |
|  +------------------------------------+  |
|                   |                       |
|                   v                       |
|  +------------------------------------+  |
|  |         Value Renderer             |  |
|  |  - Style application               |  |
|  |  - SVG attribute updates           |  |
|  |  - Object mutation                 |  |
|  |  - DOM batch updates               |  |
|  +------------------------------------+  |
+------------------------------------------+
      |
      v
Animated DOM / Objects

Installation & Usage

Installation Options

# npm
npm install animejs

# yarn
yarn add animejs

# pnpm
pnpm add animejs

# CDN (UMD)
<script src="https://cdn.jsdelivr.net/npm/animejs@4/lib/anime.umd.min.js"></script>

Basic Usage (v4)

import { animate } from 'animejs';

// Simple animation
animate('.box', {
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FF0000',
  duration: 800,
  ease: 'outQuad'
});

// With keyframes
animate('.box', {
  translateX: [
    { to: 100, duration: 500 },
    { to: 250, duration: 500 }
  ],
  rotate: { from: -180, to: 180 },
  ease: 'inOutSine'
});

Stagger Example

import { animate, stagger } from 'animejs';

animate('.grid-item', {
  scale: [0, 1],
  opacity: [0, 1],
  delay: stagger(50, { grid: [10, 10], from: 'center' }),
  ease: 'outBack'
});

Timeline Example

import { createTimeline } from 'animejs';

const tl = createTimeline({
  defaults: { duration: 750, ease: 'outQuint' }
});

tl.add('.header', { translateY: [-50, 0], opacity: [0, 1] })
  .add('.content', { translateY: [30, 0], opacity: [0, 1] }, '-=500')
  .add('.footer', { translateY: [20, 0], opacity: [0, 1] }, '-=500');

v3 to v4 Migration Key Changes

Relevance to Claude Code Development

Direct Applications

1. AI-Generated Web Applications: When Claude generates frontend code with animations, anime.js provides a well-documented, declarative API that produces reliable results
2. Code Example Generation: The consistent API patterns make it predictable for AI code generation with fewer hallucinations
3. Documentation-to-Code Pattern: Anime.js demonstrates excellent API documentation that translates cleanly to working code

Patterns Worth Adopting

1. Declarative Configuration: The object-based parameter pattern ({ duration: 800, ease: 'outQuad' }) is highly readable and self-documenting
2. Composable Building Blocks: animate(), stagger(), createTimeline() compose naturally - similar to skill composition patterns
3. Named Easing Functions: Semantic names like 'outQuad' vs numeric cubic-bezier values improve code readability
4. From/To Explicit Syntax: { from: 0, to: 100 } pattern eliminates ambiguity about animation direction
5. Tree-Shakeable Exports: ES module pattern that imports only needed functions reduces bundle size

Integration Opportunities

1. Frontend Skills: Could inform a skill for generating animated web components
2. Code Generation Patterns: The declarative API style can inspire how Claude structures generated animation code
3. Documentation Standards: Anime.js documentation exemplifies API docs that work well for both human and AI consumption

Key Insight

Anime.js demonstrates that declarative, composable APIs with semantic naming conventions are both human-readable and AI-friendly. The explicit { from, to } pattern and named easings reduce ambiguity, making generated code more reliable. This principle applies to skill and agent API design: explicit, declarative configurations outperform imperative approaches for AI comprehension.

References

1. Official Website: https://animejs.com (accessed 2026-01-31)
2. GitHub Repository: https://github.com/juliangarnier/anime (accessed 2026-01-31)
3. Documentation: https://animejs.com/documentation (accessed 2026-01-31)
4. npm Package: https://www.npmjs.com/package/animejs (accessed 2026-01-31)
5. v3 to v4 Migration Guide: https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4 (accessed 2026-01-31)
6. CodePen Examples: https://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/ (accessed 2026-01-31)

Related Tools

Freshness Tracking

Change Detection Indicators:

• Monitor npm for new version releases (v4.x active development)
• Check GitHub releases for changelog updates
• Watch for new easing functions or timeline features
• Track browser compatibility updates
• Review documentation for API additions