ScrollDriven

Native CSS · Baseline 2026 · Zero scroll listeners

The scrollbar is the timeline.

Every frame on this page is bound to the position of your scrollbar: no scroll events, no animation library. Scroll forward and the page plays. Scroll back and it rewinds.

  1. 01 / Arrival

    A real-time object, scrubbed by your scroll.

    A ViewTimeline drives the WebGL camera on this pinned stage. The JavaScript only reads its progress. It never listens for scroll.

  2. 02 / Exploded

    Pull it apart.

    Each part travels its own vector, and the labels follow them in screen space. The captions come in and out on the same timeline through animation-range.

  3. 03 / Time

    Scroll moves time.

    Twelve hours fit inside a quarter of this section. Scroll back and the hands run backwards.

    10:10
  4. 04 / Variants

    Four finishes, one timeline.

    The KHR_materials_variants swap at fixed points along the range.

    • Surgical White
    • Midnight Gold
    • Commerce Green
    • Khronos Red

Manifesto

For twenty years, motion on the web ran on the clock. We wired up scroll listeners, throttled them, and hoped the main thread kept up. Now the browser binds the animation timeline straight to the scroll offset, and it runs off the main thread. The result is buttery, reversible and declarative. Motion that answers to the reader's thumb.

Techniques

Six primitives. Infinite choreography.

01

scroll()

An anonymous timeline that tracks the progress of a scroll container from top to bottom. It drives the progress bar and HUD on this page.

animation-timeline: scroll(root block);
02

view()

Tracks an element as it crosses the scrollport: entry, cover, contain, exit. Each word of the manifesto has its own.

animation-timeline: view();
animation-range: entry 0% cover 40%;
03

animation-range

Slice one timeline into chapters. The four captions over the watch share a single named timeline.

animation-range:
  contain 25% contain 50%;
04

timeline-scope

Lifts a named timeline out of its subtree so anything can subscribe to it. The header's scrollspy needs no JavaScript.

body { timeline-scope: --s-hero, --s-watch; }
05

@property

Typed custom properties interpolate, so integers count, angles spin and colors blend, all on the timeline.

@property --n { syntax: "<integer>"; }
06

ViewTimeline

The same timelines from JavaScript. WebGL, canvas and audio can all follow the scrollbar.

new ViewTimeline({ subject })

Principles

Cards that stack, recede and dim as the next one arrives.

You are now inside the letter I

Depth from a flat page.

By the numbers

Even the counters are keyframes.

scroll event listeners on this page
browser engines, one syntax
off-main-thread, when your screen allows
reversible, frame for frame
An illustrative curve, drawn with stroke-dashoffset on a view() timeline

Now scroll back up.

All of it rewinds. Nothing here plays once.

Rewind