Sticky scrollytelling
A scrolling story where one visual stays pinned while nearby text steps pass it and update what the visual shows.
See it
What it is
Sticky scrollytelling pairs a pinned visual panel with a column of story steps that keeps moving. As each step crosses a trigger, the visual updates to the matching chart state, image, map view, or annotation. The reader controls the pace with ordinary scrolling. The New York Times feature Snow Fall in 2012 is the piece everyone cites as the start of it, and newsroom graphics desks have been refining the form ever since.
Use it when one visual needs to explain a sequence, comparison, or change over time without being repeated beside every paragraph. A sturdy web version uses position: sticky for the panel and IntersectionObserver to mark the active step while the text remains normal HTML in document order.
Gotcha: pinning is not permission to hijack the wheel or scrub every pixel into an animation. Tall pinned panels can leave little room on phones, and visual-only state changes can hide information from keyboard and screen reader users. Unpin on narrow screens, preserve every fact in the text, and honor prefers-reduced-motion.
Ask AI for it
Build a sticky scrollytelling section with a visual in the left column and five semantic text steps in the right. Pin the visual with position: sticky and top: 15vh, then use IntersectionObserver at a 0.5 threshold to activate the matching visual state as each step crosses the viewport, or Russell Goldenberg's Scrollama library if the project already has it. Do not intercept wheel or touch scrolling. Disable transitions under prefers-reduced-motion and stack the visual above each relevant step below 768px.