Scroll animations: revealing blocks, parallax and video driven by scrolling

The micro-interactions lesson covered why an interface needs motion at all. This one is only about scrolling. "Scroll animation" actually hides three different mechanisms: they're built differently, load a phone differently and need different fallbacks.

The most common and the safest kind. A block starts slightly transparent and shifted down a little, and when it enters the viewport it eases into place. This used to mean recalculating element positions on every scroll event — expensive. Today the standard tool is IntersectionObserver: the browser asynchronously reports that an element has crossed the edge of the viewport, so you don't have to listen to every pixel of scrolling (MDN covers it in detail).

When a row holds several cards, it's handy to show them as a cascade (stagger): each one starts with a small delay after the previous one. A cascade hints at the reading order and makes the grid feel alive. But with a long delay the last card arrives so late that people scroll past it.

In the second family, scrolling isn't a start button but a playhead. Scroll a third of the way and the animation is a third of the way through; scroll back and it rewinds. That's how a reading-progress bar above an article works, a header that shrinks as you scroll, and sticky scenes: a section pins to the screen with position: sticky, and while the visitor scrolls, the steps of a story change inside it.

For a long time this could only be done with scripts that calculated progress and changed styles on every scroll event. CSS now has native scroll-driven animations: the animation-timeline property ties an ordinary CSS animation to a container's scroll timeline (scroll()) or to how a particular element travels through the viewport (view()). Chrome for Developers points out that these animations can run off the main thread — so they stay smooth even when the page is busy with other work.

The golden rule of this family is never to hijack the scroll itself. The page should move exactly as the visitor turns the wheel or swipes: the animation follows the scroll, it doesn't replace it with its own pace.

The third family is video controlled by scrolling. The clip doesn't play on its own: the scroll position is converted into the video's time (the video element's currentTime property), so frames move forwards as you scroll down and backwards as you scroll up. It lets you take an object apart and put it back together, move a camera through a space, or show a process that's hard to explain in words.

The main technical trap is encoding. A regular video file stores a full (key) frame only occasionally, and between keyframes it stores just the changes relative to neighbouring frames. When you jump to an arbitrary point, the decoder has to go back to the nearest keyframe and rebuild everything up to the frame you want. Scrolling backwards makes this especially visible: the video stutters or freezes. So for a scrub scene the clip is re-encoded so that every frame is a keyframe — then any frame opens instantly, in both directions.

The InterLAB portfolio includes demo sites where we work through these mechanisms. They aren't client commissions but showcase projects — still, in each one the scroll answers a specific visitor question rather than just decorating the page.

• Krem Coffee, a coffee-shop demo: a scrub video takes the drink apart layer by layer — you see what it's made of — and reassembles it when you scroll back.
• Lumen Dental, a dental-clinic demo: scrolling drives a 3D cross-section of a veneer, so visitors see how it's built.
• Nega SPA, a spa demo: scrolling works as a camera moving through the rooms, so you can "walk through" the space before your visit.

What all three share: one unusual mechanism per page, and calm block reveals everywhere else. Prices, booking forms and contacts in these demos aren't animated, and with "reduce motion" turned on, the main scene is replaced with still frames.

Parallax means page layers moving at different speeds: the background slower, the foreground faster, creating a sense of depth. In its parallax testing, Nielsen Norman Group saw mostly unimpressed users and a familiar set of problems: pages load more slowly, text over a moving background is harder to read, and people who scroll quickly looking for something hit blank screens because the effect hasn't loaded yet. On top of that, large background movement relative to the foreground is a typical trigger of motion sickness for people with vestibular disorders.

If you do need parallax, keep it gentle: a small speed difference, decorative layers only, text on a stationary base.

Operating systems have a "reduce motion" setting, and a site can detect it through the prefers-reduced-motion media query (documented on MDN and web.dev). WCAG success criterion 2.3.3, Animation from Interactions, asks that motion triggered by user interaction — and scrolling is an interaction — can be disabled unless it's essential. For scroll animations that means: with the setting on, parallax and scroll-linked scenes switch off, blocks appear with a simple fade or instantly, and a scrub video is replaced by a still frame or a captioned series of images.