Vertical-Scroll-Driven Multi-Act Horizontal Sequence

What this builds

A full-page experience where the user scrolls vertically but the content moves horizontally through a sequence of panels organized into acts. The section pins to the viewport while vertical scroll progress maps 1:1 to horizontal translation of a panel track. Each panel has its own entrance choreography (elements reveal as the panel scrolls into the viewport). Acts are marked by visual or tonal shifts (color, scale, typography weight). The experience has a clear beginning, middle, and end.

• Pinned viewport with a horizontal track of 5-15 panels
• Vertical scroll maps to horizontal translateX via GSAP ScrollTrigger scrub
• Per-panel sub-animations triggered by containerAnimation (elements animate relative to the horizontal scroll, not page scroll)
• Act boundaries marked by color transitions, typographic shifts, or full-bleed dividers
• Optional snap between panels or between acts
• Progress indicator showing horizontal position
• Mobile: converts to native horizontal scroll-snap track (no pin, no vertical hijack) or vertical stack
• prefers-reduced-motion: static horizontal gallery with arrow navigation