Scrollytelling Data Story with Animated Chart Transitions

What this builds

A long-form scrollytelling page where narrative text panels drive a sticky chart visualization that transitions between data states as the user scrolls. Each narrative "step" corresponds to a chart state: a bar chart grows, a line appears, an annotation calls out a trend, axes rescale, bars re-sort, or a completely different chart type fades in. The chart is the visual; the text is the narration. This is the New York Times / Pudding / Observable scrollytelling pattern.

• A sticky chart container pinned in the viewport while text steps scroll past
• Chart state machine driven by scroll position (step 1 = chart state A, step 2 = chart state B, etc.)
• Smooth animated transitions between chart states (bars grow, lines morph, axes rescale)
• Text steps with clear enter/exit states and visual indicators of which step is active
• Act structure: hook/context, rising insight, climax revelation, resolution/CTA
• Responsive: chart stacks above text on mobile, steps scroll naturally
• prefers-reduced-motion: chart shows final state per step instantly, no animation