scroll-story

Scroll Story

Scroll-driven sections are the highest-impact thing on a marketing page and the easiest to get wrong. Done well, scrolling feels like operating a machine. Done badly, elements pop in late, the pinned section fights the scrollbar, and on a phone it is a broken mess. The difference is almost entirely in the timing and the mobile pass.

The two mechanics

Reveal -- an animation triggered by scroll position, then it plays on its own clock. Use for content arriving: headings, cards, images, stats. Cheap, robust, works everywhere.

Scrub -- an animation whose playhead is scroll position. The user scrubs it forward and backward. Use when the scroll is the interaction: a product rotating, a diagram assembling, a number counting, a phone screen advancing.

Most sections want reveal. Scrub is expensive to build and to run, so spend it on the one or two moments that carry the page.

Workflow

1. Storyboard in words first. For each scene: what the user sees at 0%, at 50%, at 100% of the scroll through it, and how many viewport heights it takes. If that cannot be written in three lines, the scene is doing too much. Cap the whole page at two or three scroll-driven scenes -- past that, the page feels like a hostage situation.

2. Reveals: use the native tool. IntersectionObserver or CSS animation-timeline: view() handles reveals with no library and no scroll listener. Trigger when the element is ~15-20% into the viewport, animate once, then unobserve -- content that re-animates every time it scrolls back into view is a widely disliked pattern.

   const io = new IntersectionObserver((entries) => {
     for (const e of entries) {
       if (!e.isIntersecting) continue
       e.target.dataset.revealed = 'true'   // CSS does the animating
       io.unobserve(e.target)
     }
   }, { rootMargin: '0px 0px -15% 0px' })
   

   Never animate a reveal from opacity: 0 in CSS that ships before the observer runs -- if the script fails, the content is invisible forever. Gate the hidden state on a js-enabled class or start from the visible state and let the observer add motion.