Page Transitions

Page Transition Animation

Apply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.

Quick Reference

Principle Applications

Squash & Stretch: Incoming pages can have subtle elastic settle. Modal sheets bounce slightly on full open. Pull-to-navigate stretches before triggering.

Anticipation: Current page begins exit before new page enters. Slight fade or scale prepares for change. Navigation indicator updates before page swaps.

Staging: Shared/hero elements maintain context across views. Common elements (nav, footer) stay stable. New content area receives transition focus.

Straight Ahead vs Pose to Pose: Shared element transitions morph continuously (straight ahead). Crossfades swap between discrete states (pose to pose). Choose based on content relationship.

Follow Through & Overlapping: Page content settles after initial position. Staggered content entry—header, then body, then footer. Images load with subtle fade after container.

Slow In / Slow Out: Exit: ease-in (accelerate away). Enter: ease-out (decelerate in). Combined: ease-in-out for shared elements. Never linear—feels broken.

Arc: Slide transitions can curve slightly. Stack navigation implies z-depth. Circular reveals expand from trigger point.

Secondary Action: Header updates title during transition. Bottom nav indicator moves. Background color shifts. Scroll position resets with transition.

Timing: Quick transitions: 200-300ms. Standard: 300-400ms. Complex: 400-500ms. Modal/sheet: 250-350ms. Back navigation often faster than forward.

Exaggeration: Save exaggeration for key moments—onboarding, achievement. Regular navigation should be smooth, not theatrical. Users navigate frequently.

Solid Drawing: Maintain consistent spatial metaphor. If pages stack, maintain z-order. If pages slide, direction should be consistent. Users build mental model from transitions.

Appeal: Transitions should feel helpful, not impressive. Fast, smooth, oriented. Users should understand where they came from and went to.

Transition Patterns

Crossfade (Default)

.page-exit {    opacity: 1;}.page-exit-active {    opacity: 0;    transition: opacity 200ms ease-in;}.page-enter {    opacity: 0;}.page-enter-active {    opacity: 1;    transition: opacity 200ms ease-out;}

Slide (Hierarchical)

/* Forward navigation */.page-enter {    transform: translateX(100%);}.page-enter-active {    transform: translateX(0);    transition: transform 300ms ease-out;}.page-exit-active {    transform: translateX(-30%);    transition: transform 300ms ease-in;}
/* Back navigation - reversed */.page-enter {    transform: translateX(-30%);}.page-exit-active {    transform: translateX(100%);}

Shared Element (Hero)

// View Transitions APIdocument.startViewTransition(() => {    updateDOM();});
// CSS for specific element.hero-image {    view-transition-name: hero;}::view-transition-old(hero),::view-transition-new(hero) {    animation-duration: 300ms;}

Timing Reference

Navigation Patterns

Performance

1. Use transform and opacity only
2. Hardware acceleration: will-change: transform
3. Reduce motion: instant transitions
4. Test on slow devices—transitions must not block
5. View Transitions API: native performance