v147 · CSS · Scroll-driven animations · demo

Full-Range Fade

Side-by-side: the old cover named range (bounded by visibility) vs the new scroll named range (full container extent). Both scroll containers, both animated bars.

cover 0% → cover 100%

This bar uses animation-range: cover 0% cover 100%. It only animates during the portion of the scroll where this element is partially visible — from the moment it enters to the moment it fully exits.

Scroll down slowly. Notice the bar colour only changes while the element is in the viewport crossing zone — it doesn't reach full green until the top of the element has scrolled past the bottom of the container.

This is correct for element-level animations but insufficient for tracking the full scroll distance of the container.

Keep scrolling…

animation-range: cover 0% cover 100%

Animates only during element visibility

scroll 0% → scroll 100% (Chrome 147+)

This bar uses animation-range: scroll 0% scroll 100%. It starts animating from the very first pixel of container scroll and reaches completion when the container is scrolled all the way to the bottom.

The animation tracks the full scroll extent of the container — exactly what you need for a reading progress bar or a full-page parallax effect.

Notice how the colour transitions continuously as you scroll, reaching green at the very bottom — a 1:1 mapping to scroll position.

Keep scrolling…

animation-range: scroll 0% scroll 100%

Animates across full container scroll (Chrome 147+)

range lab

synced scroll position

cover branch0 px of 0 px

scroll branch0 px of 0 px

selected declarationanimation-range: scroll 0% scroll 100%

parser and computed rangechecking exact scroll range

Scroll either box or choose a range branch to inspect the full-range fade contract.

/* cover range — only while element is visible */
.bar {
  animation: color-shift linear;
  animation-timeline: --cover-subject;
  animation-range: cover 0% cover 100%;
}

/* scroll range (Chrome 147+) — full container extent */
.scroll-col {
  timeline-scope: --scroll-subject;
}

.scroll-content {
  view-timeline-name: --scroll-subject;
  view-timeline-axis: block;
}

.bar {
  animation: color-shift linear;
  animation-timeline: --scroll-subject;
  animation-range: scroll 0% scroll 100%;
}

implementation reference

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

cover 0% → cover 100%

scroll 0% → scroll 100% (Chrome 147+)

range lab

see also

implementation reference