animejs-animation

Anime.js Animation Skill

Anime.js 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)"