Transition Sequence Animations

Apply Disney's 12 principles to choreographed multi-step motion.

Principle Application

Squash & Stretch: Each element in sequence can compress/expand independently for organic feel.

Anticipation: Sequence starts with a setup phase. Brief pause or gather before motion begins.

Staging: Direct attention through the sequence. Most important element animates first or last.

Straight Ahead vs Pose-to-Pose: Plan keyframes for each step. Map the entire sequence before implementing.

Follow Through & Overlapping: Elements don't move in unison. Stagger starts by 50-100ms. Let motion cascade.

Slow In/Slow Out: Each step eases. The sequence overall should ease too - faster middle, slower ends.

Arcs: Transitions across space follow arcs. Page sliding left curves slightly, not linear slide.

Secondary Action: Primary transition + secondary details. Page slides while elements within fade/scale.

Timing:

• Step overlap: 30-50% of previous step's duration

• Total sequence: 300-800ms for UI, up to 1500ms for dramatic

• Gap between steps: 0-100ms (overlap preferred)

Exaggeration: Sequence itself is exaggeration. Individual steps stay subtle.

Solid Drawing: Maintain spatial consistency. If A goes left, B should come from left.

Appeal: Sequences tell a story. Beginning, middle, end - satisfying resolution.

Timing Recommendations

Sequence Type Total Duration Step Count Step Overlap

Tab Change 300ms 2 50%

Page Transition 500-600ms 2-3 30%

Modal Open 400ms 3 40%

Wizard Step 400ms 2 50%

Onboarding 800-1200ms 4-6 30%

Dramatic Reveal 1000-1500ms 5-8 40%

Implementation Patterns

/* Staggered sequence */ .sequence-item { opacity: 0; transform: translateY(20px); animation: reveal 400ms ease-out forwards; }

.sequence-item:nth-child(1) { animation-delay: 0ms; } .sequence-item:nth-child(2) { animation-delay: 80ms; } .sequence-item:nth-child(3) { animation-delay: 160ms; } .sequence-item:nth-child(4) { animation-delay: 240ms; }

@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* Page transition choreography */ .page-exit { animation: page-out 250ms ease-in forwards; }

.page-enter { animation: page-in 300ms ease-out 200ms forwards; }

@keyframes page-out { to { opacity: 0; transform: translateX(-30px); } }

@keyframes page-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

Sequence Orchestration Formula

// Calculate stagger delays const items = document.querySelectorAll('.sequence-item'); const totalDuration = 600; // ms const overlap = 0.4; // 40% overlap

items.forEach((item, index) => { const stepDuration = totalDuration / items.length; const delay = index * stepDuration * (1 - overlap); item.style.animationDelay = ${delay}ms; });

Key Rules

• Overlap steps 30-50% - no gaps, no simultaneous starts

• Total sequence under 800ms for functional UI

• Test at 0.5x speed to verify choreography

• Provide skip option for sequences over 500ms

• prefers-reduced-motion : instant state change, no sequence