Chapter-Pinned Narrative Scroll

What this builds

A full-page scrollytelling experience using the split-screen "sticky visual + scrolling text" pattern. A visual panel (left or right, configurable) pins to the viewport and transitions between states (image swaps, chart draws, map zooms, counter animations) as the user scrolls through text chapters on the opposite side. Each chapter drives one visual state. The text leads; the visual illustrates.

• 4-10 chapters, each with a dedicated visual state and a text block
• Visual panel pinned for the entire story duration via GSAP ScrollTrigger
• Chapter transitions: crossfade, slide, zoom, draw, or count, rotating to avoid repetition
• Pacing math: each chapter's scroll height computed from word count + visual transition complexity
• Act structure overlaid on chapters (introduction, rising, climax, resolution) with tonal shifts
• Global progress indicator showing current chapter and overall position
• Mobile: stacked layout (visual above text, no pin, visual transitions fire on chapter entry)
• prefers-reduced-motion: all visuals visible, no transitions, static stacked layout