gsap-timeline-orchestratorlisted

# GSAP Timeline Orchestrator An interface where everything appears at once has no rhythm; one where each element fires its own independent animation has too much. The premium feel comes from *choreography*: a single timeline that brings elements on in reading order — signpost, then headline, then body — with the pieces overlapping so the eye is led rather than made to wait. GSAP's timeline is the right tool because it gives one sequence, one clock, one place to control playback, and staggers with a single parameter. Think of it as a stage entrance, not a slideshow: the rail steps in quietly, the headline steps onto its mark while the rail is still settling, and the copy cascades in behind it. ## The rules of the sequence **One timeline per section.** Everything in a section is a child of one `gsap.timeline({ defaults: { ease, duration } })`. Independent `gsap.from()` calls can't be paused, reversed, or re-timed together, and they collide when the user scrolls mid-animation. Sections get their own timeline so below-fold content can be triggered on scroll. **Reading order, overlapping.** Use the position parameter to overlap phases — `"-=0.9"` (start 0.9s before the previous ends), `"<"` (start with the previous), or absolute times (`0`, `0.15`, `0.3`). Sequential `.from().from()` with no overlap is the slideshow feel you're avoiding. **Staggers between 0.03 and 0.07.** For a collective — list items, grid cells, nav links, paragraphs — one tween with `stagger: 0.05`. Belo