page-transitions
Page Transition Animation
Apply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.
Quick Reference
| Principle | Page Transition Implementation |
|---|---|
| Squash & Stretch | Entering page elastic effect |
| Anticipation | Exit animation before enter |
| Staging | Hero elements bridge views |
| Straight Ahead / Pose to Pose | Shared element vs crossfade |
| Follow Through / Overlapping | Content settles after nav |
| Slow In / Slow Out | Asymmetric enter/exit easing |
| Arc | Slide transitions with curve |
| Secondary Action | Background, nav state changes |
| Timing | 200-500ms total transition |
| Exaggeration | Reserved for emphasis moments |
| Solid Drawing | Consistent spatial model |
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.6Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
624motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
558micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
441saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
293game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287