# Anime.js - JavaScript Animation Engine > 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. - Skill: `tools-only/anime-js-javascript-animation-engine` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add tools-only/anime-js-javascript-animation-engine` - Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/anime-js-javascript-animation-engine/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tools-only (https://skillmd.com/u/tools-only) - Updated: 2026-09-29 - Page: https://skillmd.com/skills/tools-only/anime-js-javascript-animation-engine --- # Anime.js - JavaScript Animation Engine **Research Date**: January 31, 2026 **Source URL**: **GitHub Repository**: **Documentation**: **npm Package**: **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 | Problem | How Anime.js Solves It | | ----------------------------------------------------------- | ----------------------------------------------------------------------------- | | CSS animations lack programmatic control | Full JavaScript API with play, pause, reverse, seek controls | | Complex sequenced animations are hard to manage | Timeline API with sequential and parallel composition | | Staggered animations require manual delay calculations | Built-in stagger utility with grid, from-center, and easing options | | SVG animations require specialized knowledge | Native SVG property support including path morphing and motion paths | | Animation libraries are often heavyweight | ~17KB minified, zero dependencies, tree-shakeable ES modules | | Coordinating animations across multiple elements is complex | Target-based approach with CSS selectors, NodeLists, or JavaScript objects | | Easing functions are limited in CSS | 30+ built-in easing functions plus custom cubic-bezier and spring physics | --- ## Key Statistics (as of January 31, 2026) | Metric | Value | | ------------------- | ---------------------------- | | GitHub Stars | 66,288 | | Forks | 4,435 | | Open Issues | 86 | | Primary Language | JavaScript | | Created | March 2016 | | Latest Release | v4.3.5 (January 25, 2026) | | npm Weekly Downloads| 487,588 | | npm Monthly Downloads| 1,477,792 | | License | MIT | --- ## 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 ```javascript 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 ```javascript 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 ```javascript 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 ```text 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 ```bash # npm npm install animejs # yarn yarn add animejs # pnpm pnpm add animejs # CDN (UMD) ``` ### Basic Usage (v4) ```javascript 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 ```javascript 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 ```javascript 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 | v3 Syntax | v4 Syntax | | --------- | --------- | | `anime({ targets: 'div', ... })` | `animate('div', { ... })` | | `easing: 'easeOutQuad'` | `ease: 'outQuad'` | | `direction: 'alternate'` | `alternate: true` | | `direction: 'reverse'` | `reversed: true` | | `anime.timeline()` | `createTimeline()` | | `endDelay: 1000` | `loopDelay: 1000` | | `value: 100` | `to: 100` | --- ## 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**: (accessed 2026-01-31) 2. **GitHub Repository**: (accessed 2026-01-31) 3. **Documentation**: (accessed 2026-01-31) 4. **npm Package**: (accessed 2026-01-31) 5. **v3 to v4 Migration Guide**: (accessed 2026-01-31) 6. **CodePen Examples**: (accessed 2026-01-31) --- ## Related Tools | Tool | Relationship | | ------------------------------------------------------------- | ------------------------------------------------------ | | [GSAP](https://greensock.com/gsap/) | More feature-rich animation platform (commercial) | | [Motion One](https://motion.dev/) | Modern alternative with Web Animations API | | [Framer Motion](https://www.framer.com/motion/) | React-specific animation library | | [Popmotion](https://popmotion.io/) | Functional animation library | | [Lottie](https://airbnb.design/lottie/) | After Effects animation player for web | --- ## Freshness Tracking | Field | Value | | ---------------------------- | --------------------- | | Last Verified | 2026-01-31 | | Version at Verification | v4.3.5 | | GitHub Stars at Verification | 66,288 | | npm Weekly Downloads | 487,588 | | Next Review Recommended | 2026-04-30 (3 months) | **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