v147 · CSS · Scroll-driven animations

Timeline Named Range "scroll"

A new scroll named range for view timelines covers the entire scroll extent of the container — not just the portion where the subject element is visible.

concepts

  1. Progress Tracker

    A reading-progress bar that uses the scroll named range on a view timeline — attached to the article itself — so the bar tracks the full scroll extent of the container, not just when the article enters or exits view.

  2. Full-Range Fade

    Side-by-side: an element animated with the old cover named range (only visible portion) vs the new scroll named range (full container extent). See why scroll is needed for viewport-wide effects.

  3. Chapter Navigator

    A sticky sidebar pairs JavaScript chapter navigation with a CSS-only progress meter. The meter targets a named view-timeline through timeline-scope and uses animation-range: scroll 0% scroll 100% to track the article scroller from top to bottom.

  4. Section Dots

    A sticky dot navigator alongside a scrollable article. A black CSS bar uses the scroll named range on a named view timeline, while the dots and green fallback bar show the JavaScript path for unsupported browsers.

  5. Compatibility Lab

    Probes the exact named view timeline contract: view-timeline-name, timeline-scope, and animation-range: scroll 0% scroll 100%. A live comparison measures the CSS current time against a JavaScript scrollTop fallback and exposes the no-overflow inactive-timeline branch.

why it shipped

Scroll-driven animations introduced ViewTimeline — a timeline that tracks when a subject element is visible in its scroll container. Named ranges (entry, exit, cover, contain) describe portions of that timeline relative to the subject's visibility. But all of these ranges are bounded by the subject's intersection with the container: you couldn't animate based on how far the scroll container had been scrolled in total, only based on what the element was doing. The new scroll named range maps to the full scroll extent of the underlying container, giving animation authors a way to drive animations across the full page scroll — especially useful for reading-progress bars, parallax, and page-scale transitions attached to a specific element.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗