Scrollytelling
A story told through scrolling, usually with text chapters moving past a sticky visual that changes at each beat.
See it
What it is
Scrollytelling turns an article into a sequence of scroll-controlled beats. The prose moves through chapters while a sticky visual stays in view and changes state to match the active passage. The New York Times feature 'Snow Fall' from 2012 is a widely cited landmark for this style of web storytelling.
Reach for it when order and explanation matter: assembling a diagram, walking through a dataset, touring a product, or showing change over time. IntersectionObserver can switch discrete chapter states; GSAP ScrollTrigger or CSS 'animation-timeline' can scrub a continuous visual between them. Scrollama, the library The Pudding built for its own essays, wraps the observer half in a step-based API.
Gotcha: do not hijack the wheel or replace native scrolling. The story must still make sense if sticky positioning fails, the viewport is short, or motion is reduced. Keep text in the document as real content, give each chapter enough room to read, and avoid making users scrub with pixel precision to reach an important fact.
Ask AI for it
Build this as a scrollytelling section with one sticky visual and four scrolling text chapters. Use GSAP ScrollTrigger with 'pin: true' and 'scrub: 1' to map about 100vh of scroll to each visual beat, and use IntersectionObserver to mark the matching chapter as active for screen reader and keyboard context. Keep the article readable in source order without JavaScript, never intercept wheel or touch events, call ScrollTrigger.refresh() after fonts and images load, and replace scrubbing with four static end-state illustrations under 'prefers-reduced-motion: reduce'.