Orchestrated Sequences

Orchestrated sequences coordinate multiple elements across time. Like a conductor directing an orchestra, you control when each element enters, how it moves, and how elements relate.

Disney Principles for Orchestration

Ensemble Coordination

Squash & Stretch: Unified style - all elements should share consistent elasticity. Mix bouncy and stiff looks chaotic.

Anticipation: Staggered preparation - lead element anticipates first, others follow in sequence.

Staging: Clear hierarchy - primary action leads, secondary elements support but don't compete.

Straight Ahead/Pose to Pose: Pose to pose mandatory - choreography requires precise timing control.

Follow Through: Cascading settle - elements land in sequence with overlapping follow-through.

Slow In/Slow Out: Shared easing family - use variations of same curve for cohesion.

Arcs: Coordinated paths - elements should move in complementary directions, not randomly.

Secondary Action: Intentional support - every element has a role in the composition.

Timing: The heart of orchestration - stagger delays, duration variations, tempo changes.

Exaggeration: Proportional emphasis - primary elements more exaggerated, supporting less.

Solid Drawing: Consistent dimensional logic - shared perspective, depth, scale relationships.

Appeal: Unified performance - the sequence should feel like one composed moment.

Timing Strategies

/* Linear stagger - equal delays */ .item:nth-child(n) { transition-delay: calc(var(--index) * 50ms); }

/* Accelerating stagger - getting faster */ .item:nth-child(1) { transition-delay: 0ms; } .item:nth-child(2) { transition-delay: 80ms; } .item:nth-child(3) { transition-delay: 140ms; } .item:nth-child(4) { transition-delay: 180ms; }

/* Decelerating stagger - slowing down */ .item:nth-child(1) { transition-delay: 0ms; } .item:nth-child(2) { transition-delay: 40ms; } .item:nth-child(3) { transition-delay: 100ms; } .item:nth-child(4) { transition-delay: 180ms; }

Easing Recommendations

/* Cohesive family - same curve, different durations */ .primary { transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1); } .secondary { transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1); } .tertiary { transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Sequence curve - smooth start, confident end */ animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

Best Use Cases

• Page load sequences

• Dashboard reveals

• Card grid animations

• Navigation menu opens

• Feature section reveals

• Data visualization builds

• Onboarding step sequences

• List population animations

Implementation Pattern

/* Staggered reveal system */ .orchestrated-item { opacity: 0; transform: translateY(20px); transition: opacity 300ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1); }

.orchestrated-item.visible { opacity: 1; transform: translateY(0); }

/* Apply delays via CSS custom properties or nth-child */ .orchestrated-item:nth-child(1) { transition-delay: 0ms; } .orchestrated-item:nth-child(2) { transition-delay: 75ms; } .orchestrated-item:nth-child(3) { transition-delay: 150ms; } .orchestrated-item:nth-child(4) { transition-delay: 225ms; }

// JS orchestration for complex sequences const sequence = [ { el: '.hero', delay: 0, duration: 500 }, { el: '.title', delay: 100, duration: 400 }, { el: '.subtitle', delay: 200, duration: 350 }, { el: '.cta', delay: 350, duration: 400 }, ];

Key Insight

Orchestration is composition in time. Just as visual design arranges elements in space, animation orchestration arranges motion in time. The goal is a single, coherent performance, not a collection of individual animations.