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 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:

   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.

AGI Framework Integration

Adapted for @techwavedev/agi-agent-kit Original source: antigravity-awesome-skills

Memory-First Protocol

Retrieve prior decisions and patterns to avoid re-discovering solutions. Cache results for instant retrieval in future sessions.

# Check for prior development context before starting
python3 execution/memory_manager.py auto --query "prior work and patterns related to Animejs Animation"

Storing Results

After completing work, store development decisions for future sessions:

python3 execution/memory_manager.py store \
  --content "Completed task with key insights documented for future reference" \
  --type decision --project <project> \
  --tags animejs-animation default

Multi-Agent Collaboration

Share outcomes with other agents so the team stays aligned and avoids duplicate work.

python3 execution/cross_agent_context.py store \
  --agent "<your-agent>" \
  --action "Task completed — results documented and shared with team" \
  --project <project>