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