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.