Scroll· 11 sites
Reference: CSS positioning, MDN contributors
How it works
A native-scroll stage holds its place while three editorial chapters slide through it.In 5 steps.
A chapter needs room to unfold, not a slower wheel. Pin the stage with CSS sticky, then map the space left in its parent to progress. The page keeps native touch momentum, keyboard scrolling and its scrollbar.
The controls below are authored demonstration values, not measurements of the linked sites. The stored fits currently describe scroll smoothing and intro curves, not this effect's geometry; see each site's spec sheet for those separately measured values and fit errors.
- 01
Reserve the runway
Make the section taller than its sticky child. The difference is the scroll distance, not a time duration.
- 02
Pin the stage
Use position: sticky inside the runway, without a transformed ancestor or an accidental overflow parent.
- 03
Map position to progress
Divide scrollTop by the runway travel and clamp to the unit interval. Translate opaque chapters vertically, reading geometry before writing transforms; text never crossfades over other text.
- 04
Keep the story readable
The reduced-motion version lays every chapter out in order instead of pinning or hiding it.
- 05
Dispose cleanly
Call destroy() when the view unmounts to disconnect resize and preference observers, remove scroll listeners and cancel pending frames.