view-timeline

The view-timeline CSS shorthand property defines a named view progress timeline’s name, direction, and inset values.

The view-timeline shorthand property defines a named view progress timeline, which progresses based on changes to the visibility of an element (the subject) within a scrollable element (scroller). The view-timeline property is set on the subject. If the scroller element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created.

The subject’s visibility inside the scroller is tracked — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller and 100% when it reaches the opposite edge.

Syntax example: view-timeline: none;