animejs-animation

# Anime.js Animation Skill [Anime.js](https://animejs.com/) is a lightweight but extremely powerful JavaScript animation engine. It excels at complex timelines, staggering, and precise control over DOM, CSS, and SVGs. ## Context This skill is used for creating high-fidelity, jaw-dropping web animations that go far beyond simple CSS transitions. It's the tool of choice for awards-caliber interactive sites. ## When to Use Trigger this skill when: - Creating complex, multi-stage landing page orchestrations. - Implementing staggered animations for revealing grids, text, or data visualizations. - Animating SVG paths (morphing shapes, drawing dynamic lines). - Building highly interactive, kinetic UI elements that respond fluidly to user input. ## Execution Workflow 1. **Identify Targets**: Select the DOM elements or SVGs to be animated. 2. **Define Properties & Easing**: Specify values to animate. **Crucially**, utilize advanced easing functions (e.g., custom `cubicBezier`, `spring`, or `elastic`) instead of basic `linear` or `ease-in-out` to make the motion feel expensive and natural. 3. **Orchestrate Timelines**: Use `anime.timeline()` to sequence complex choreography. Master the use of timeline offsets (relative `'-=200'` vs absolute) to create seamless overlapping motion. 4. **Implement**: ```javascript const tl = anime.timeline({ easing: "spring(1, 80, 10, 0)", duration: 1000, }); tl.add({ targets: ".hero-text", translateY: [50, 0], ...