v147 · css · covered on mdn
Timeline Named Range "scroll"
A new scroll named range keyword for view timeline animations, extending the existing set of timeline range names (cover, contain, entry, exit, entry-crossing, exit-crossing). The scroll range spans the entire scroll extent of the scroll container — from the very start to the very end — rather than being limited to the portion where the subject element is visible.
this feature is documented on MDN
MDN: Understanding timeline range names
MDN's timeline range names guide covers all named ranges including the new scroll range, with visual diagrams and usage examples for animation-range. gendn doesn't duplicate that here.
quick reference
| New keyword | scroll |
|---|---|
| Applies to | animation-range, animation-range-start, animation-range-end with a view timeline |
| Extent | Full scroll extent of the scroll container — start to end, independent of the subject element's visibility |
| vs. existing ranges | cover, contain, entry, exit are all constrained to the visible portion of the subject; scroll is not |
| Use case | Animating an element across the entire page scroll, or from a specific scroll position relative to the full scroll extent |
| Example | animation-range: scroll 20% scroll 80%; |
| Shipped in | Chrome 147 (desktop + Android) |
| ChromeStatus | 6522328437620736 — Timeline Named Range "scroll" |
| Spec | CSS Scroll-Driven Animations Level 1 |