Animejs animation

--- name: animejs-animation description: Advanced JavaScript animation library skill for creating complex, high-performance web animations. risk: safe source: community date_added: "2026-03-07" --- # 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], opacity: [0, 1], delay: anime.stagger(100), }).add( { targets: ".hero-image", scale: [0.9, 1], opacity: [0, 1] }, "-=800", ); ` ## Strict Rules - **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build common, boring transitions. Every animation should feel bespoke, fluid, and heavily polished. - **Staggering**: Leverage anime.stagger() extensively to add organic rhythm to multiple elements. - **Performance**: Monitor main thread usage; use will-change: transform, opacity` where appropriate for GPU acceleration. ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.