Scroll-driven motion with zero JavaScript.

Scroll down. The cards below fade and slide in as they enter the viewport, and the bar across the top fills as you read. All of it is CSS.

Why it matters

Motion that costs nothing.

Traditional scroll effects run JavaScript on every scroll event, which can make pages feel sluggish on older phones. Scroll-driven animations are handled by the browser itself, off the main thread, so they stay smooth and add no script weight. Visitors who ask their device to reduce motion get a calm, static page instead.

View-timeline reveals

Plan

Each card is tied to its own position in the viewport with animation-timeline: view().

Build

There is no observer, no scroll listener and no animation library.

Launch

If you have reduced motion switched on, these cards simply appear in place.

Support

Browsers without support for the feature show the content normally.

Page transitions with View Transitions

Move between pages of this site and you may see a soft cross-fade while the header stays put. That is the CSS View Transitions feature: one @view-transition rule opts every page in, and the browser animates between the old and new page. It is also disabled for visitors who prefer reduced motion.

What is under the hood

animation-timeline: view() links each card to its visibility in the scroll container.
animation-timeline: scroll() links the top bar to the page scroll position.
Both are declared only inside @media (prefers-reduced-motion: no-preference), so reduced-motion visitors get no animation at all.
Everything is a normal stylesheet from our own domain, which our Content-Security-Policy allows.

Back to the lab