Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations. Triggers on tasks involving Anime.js, timeline animations, staggered sequences, SVG pa

Anime.js Lightweight JavaScript animation library with powerful timeline and stagger capabilities for web animations. Overview Anime.js (pronounced "Anime JS") is a versatile animation engine that works with DOM elements, CSS properties, SVG attributes, and JavaScript objects. Unlike React specific libraries, Anime.js works with vanilla JavaScript and any framework. When to use this skill: Timeline based animation sequences with precise choreography Staggered animations across multiple elements SVG path morphing and drawing animations Keyframe animations with percentage based timing Framework agnostic animation (works with React, Vue, vanilla JS) Complex easing functions (spring, steps, cubic bezier) Core features: Timeline sequencing with relative positioning Powerful stagger utilities (grid, from center, easing) SVG morphing and path animations Built in spring physics easing Keyframe support with flexible timing Small bundle size (~9KB gzipped) Core Concepts Basic Animation The anime() function creates animations: Targets Multiple ways to specify animation targets: Animatable Properties CSS Properties: CSS Transforms (Individual): SVG Attributes: JavaScript Objects: Timeline Create complex sequences with precise control: Common Patterns 1. Stagger Animation (Sequential Reveal) 2. Stagger from Center 3. SVG Line Drawing 4. SVG Morphing 5. Timeline Sequence 6. Keyframe Animation 7. Scroll Triggered Animation Integration Patterns With React With Vue Path Following Animation Advanced Techniques Spring Easing Steps Easing Custom Bezier Direction and Loop Playback Control Performance Optimization Use Transform and Opacity Batch Similar Animations Use will change for Complex Animations Disable autoplay for Scroll Animations Common Pitfalls 1. Forgetting Unit Types 2. Using CSS transform Property Directly 3. Not Handling Animation Cleanup 4. Animating Too Many Elements 5. Incorrect Timeline Timing 6. Overusing Loop Resources Scripts animation generator.py Generate Anime.js animation boilerplate (8 types) timeline builder.py Build complex timeline sequences References api reference.md Complete Anime.js API documentation stagger guide.md Stagger utilities and patterns timeline guide.md Timeline sequencing deep dive Assets starter animejs/ Vanilla JS + Vite template with examples examples/ Real world patterns (SVG morphing, stagger grids, timelines) Related Skills gsap scrolltrigger More powerful timeline features and scroll integration motion framer React specific declarative animations react spring physics Physics based spring animations lightweight 3d effects Simple 3D effects (Zdog, Vanta.js) Anime.js vs GSAP : Use Anime.js for SVG heavy animations, simpler projects, or when bundle size matters. Use GSAP for complex scroll driven experiences, advanced timelines, and professional grade control. Anime.js vs Framer Motion : Use Anime.js for framework agnostic projects or when working outside React. Use Framer Motion for React specific declarative animations with gesture integration.