Timeline / orchestration

A timeline is a container that holds several animations and places each one at a position relative to the others, so a sequence becomes one object you can play, pause, reverse, or scrub. The magic is the position parameter: instead of hand-computing delays, you say 'start this 0.2s before the previous one ends' and the timeline does the math.

Reach for it the moment a sequence has more than about three steps, or the moment you catch yourself writing 'delay: 1.35s'. The canonical tool is a GSAP timeline with relative offsets ('-=0.2', '<', '>') and named labels; Motion (Framer Motion) does the declarative version with variants plus delayChildren and staggerChildren. Plain WAAPI has no timeline object to hand you: you sequence it yourself with explicit start times or delays on each animation, drive the group with pause, reverse, and playbackRate, and await one animation's 'finished' promise before starting the next. Handing several animations a shared timeline only syncs their clock, it does not order them, and the GroupEffect-style grouping that would has never landed broadly.

Gotcha: absolute delays are the thing timelines exist to kill. Hardcode them and the first duration you tweak silently desyncs every step downstream. Use labels and relative offsets, build nested timelines for each section, then compose those, and keep the total under a couple of seconds unless the user asked to watch a show.