scroll-timeline

The scroll-timeline CSS shorthand property is used to define a named scroll progress timeline, which is progressed through by scrolling a scrollable element (scroller) between top and bottom (or left and right).

The scroll-timeline shorthand property can be applied to a container element to set both the scroll-timeline-name and scroll-timeline-axis properties. It is set on the scroller that will provide the timeline. If the container has no overflow to scroll or if the overflow is hidden or clipped, no timeline will be created.

The value for the scroll-timeline-name, if not set to none, must be a dashed-ident, which means it must start with –. This helps avoid name clashes with standard CSS keywords. The name can then be used as the value of an element’s animation-timeline property to define the scrolling container element that will define its animation timeline, driving the animation progress as it scrolls.

Syntax example: scroll-timeline: none;