---
name: "animejs-complex-staggers"
description: "Orchestrate complex SVG path morphing, SVG line drawing, and grid staggers with Anime.js."
metadata:
  author: "Julian Garnier"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create grid stagger anime.js"
  - "draw svg lines anime.js"
  - "animate numeric counter animejs"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Anime.js Elastic Staggering & Path Morphing

Builds expressive UI and vector animations with Anime.js: anime.stagger(), strokeDashoffset drawing, elastic easing curves, timeline sequencing, and round numeric count-ups.

## When to Invoke
Invoke this skill whenever you need to:
- create grid stagger anime.js
- draw svg lines anime.js
- animate numeric counter animejs

## Execution SOP & Rules
1. Use anime({ targets: '.card', translateY: [50, 0], delay: anime.stagger(100, { grid: [8, 8], from: 'center' }) }).
2. Draw SVG strokes by animating strokeDashoffset: [anime.setDashoffset, 0].
3. Group dependent animations inside an anime.timeline({ easing: 'easeOutExpo' }).
4. Pause and reverse animations cleanly with animationInstance.pause() and animationInstance.reverse().

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.