Zt Anime Stagger

---
name: zt-anime-stagger
description: Stagger motion: production-level grid/time/value stagger with deterministic ordering. Use when implementing, reviewing or testing stagger motion for React, Vite, Next.js or Perfect_AI projects.
---

# Stagger motion

## When to activate
Use on tasks involving **grid/time/value stagger with deterministic ordering**. For unrelated backend tasks do not load this skill.

## Implementation sequence
1. Specify timeline: targets, start/end states, duration, easing, repeat, pause, reversal, cleanup.
2. Import named Anime.js v4 APIs into client-only lifecycle; do not use v3 anime({...}) signatures.
3. Use transforms and opacity for animation; sequence with timeline rather than disconnected timeouts.
4. Bind scroll to normalized progress and apply exactly one owner per property.
5. Implement reduced-motion and cleanup; test reverse scroll, refresh at mid-scroll and resize.

## Task-specific requirements
- Scope: **grid/time/value stagger with deterministic ordering**. Design the full execution path, not a screenshot placeholder.
- Identify dependency version and actual supported API signature; avoid inventing APIs.
- Use original code, or install licensed upstream through its maintained tool if the user wants upstream code.
- Choose measurable states, error handling, accessibility and performance budgets.

## Implementation starter
```ts
import { animate, stagger } from 'animejs';
animate('.reveal-item', { opacity:[0,1], y:[24,0], duration:720, delay:stagger(72), ease:'outCubic' });
```
Ensure initial hidden state never prevents content access when JavaScript fails.

## Evidence / acceptance
- Prove deterministic playback in forward/reverse scroll; no timer leaks; reduced-motion shows full content.
- Test common, edge, interrupted, accessibility and responsive states; provide concrete artifacts/evidence.

## Deep references
- `../perfect-ai-master/references/01-animejs-motion.md`
- `../perfect-ai-master/references/06-motion-recipes.md`
- `../perfect-ai-master/references/16-animejs-api-matrix.md`