v147 · CSS · Scroll Animation · demo

Section Dots

A sticky dot navigator alongside a scrollable article. The black bar is driven by a named view-timeline using animation-range: scroll 0% scroll 100%, while the dots and green bar show the JavaScript fallback path for browsers that do not support the new range.

Chrome 147+. The CSS progress bar attaches to a named view timeline on the article content. The scroll named range maps that view timeline to the full scroll extent of the article scroller.

Scroll the article, press a sample-position button, or click any dot to jump to a section.

Full scroll progress

CSS named view timeline

CSS current time: pending

JS fallback measurement

JS scroll progress: 0%
Waiting for scroll input.
/* Progress driven by the new 'scroll' named range */
.stage {
  timeline-scope: --article-scroll-range;
}

.article-inner {
  view-timeline-name: --article-scroll-range;
  view-timeline-axis: block;
}

.progress {
  animation: grow-bar linear both;
  animation-timeline: --article-scroll-range;
  animation-range: scroll 0% scroll 100%;
}

see also

implementation reference

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