# Animation Choreography

> Page transition choreography, staggered animations, and orchestrated motion sequences.

- Skill: `dragoon0x/animation-choreography` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/animation-choreography`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/animation-choreography/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/animation-choreography

---


# Animation Choreography

## Page Transitions

### Types
- **Fade:** Universal, safe, minimal. 200-300ms.
- **Slide:** Directional relationship (forward/back, up/down). 300-400ms.
- **Shared element:** Element morphs between pages (photo expanding to detail). 400-500ms.
- **None:** Sometimes the best transition. Instant is fine for quick navigation.

### Rules
1. Exits are faster than enters (150ms exit, 250ms enter).
2. Direction indicates hierarchy (slide right = deeper, slide left = back).
3. Don't transition between unrelated pages (just cut).
4. Shared element transitions only when there's a clear visual connection.

## Stagger Patterns
```css
.item { animation: fadeInUp 300ms ease-out both; }
.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }
/* Max 8-10 items staggered, then batch the rest */
```

### Stagger Rules
- 30-80ms delay between items.
- Cap at 8-10 items (total sequence under 500ms).
- Items beyond the cap appear together at the end.
- Stagger direction: top-to-bottom or left-to-right (match reading order).