animejslisted

# 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: ```javascript import anime from 'animejs' anime({ targets: '.element', translateX: 250, rotate: '1turn', duration: 800, easing: 'easeInOutQuad' }) ``` ### Targets Multiple ways to specify animation targets: ```javascript // CSS selector anime({ targets: '.box' }) // DOM elements anime({ targets: document.querySelectorAll('.box') }) // Array of elements anime({ targets: [el1, el2, el3] }) // Ja