Choreography

When ten elements animate simultaneously with no relationship to each other, the result is visual noise. When those same elements animate in a structured sequence — responding to each other, flowing in a direction, building toward a state — the result is choreography.

The elements of choreography

Choreography coordinates three dimensions of motion across multiple elements: sequence (which element moves first), direction (where the sequence flows — top to bottom, left to right, outward from a focal point), and relationship (whether elements move independently or in response to each other). These three dimensions, controlled through stagger and timing, turn a collection of animations into a single composed moment.

Flow direction

The sequence of animation should map to a spatial direction that the user can follow. A grid of cards loading top-to-bottom-left-to-right reads as scanning — the user’s eye follows the natural reading path. A set of elements that all originate from a central focal point (expanding outward) reads as radiating from a source. A random order reads as random — no spatial logic, no coherent story. Match the flow direction to the implied spatial structure of the content.

Hierarchy through timing

The first element to animate draws the eye first — it claims the primary position in the sequence. Use this to reinforce visual hierarchy: the heading arrives before the body text, the primary action arrives before the secondary ones. Choreography is a tool for directing attention across time, not just across space.

The threshold of complexity

More elements and more stages of animation increase complexity. Beyond three or four stages, choreography becomes a performance — the user is watching, not doing. Complex multi-step entrance animations belong on landing pages and onboarding flows where the user is expected to observe. They do not belong in application interfaces where the user is trying to accomplish a task. The test: would removing one stage of the animation reduce clarity? If no, the stage is decorative.

Coordinating exit

Choreography applies to exits as well as entrances. When a group of elements exits — a list emptying, a screen clearing before a transition — the exit sequence can mirror the entrance in reverse (the last element to arrive is the first to leave) or follow its own logic (all exit in the same direction, simultaneously). The exit choreography completes the spatial story begun by the entrance.

The takeaway

Design choreography by deciding flow direction first, then assigning stagger offsets along that direction. Keep total duration under 500ms. Use the sequence to reinforce content hierarchy. Restrict complex choreography to non-interactive moments — page loads and transitions — rather than task-focused interfaces.