monks/view_timeline_name

The view-timeline-name CSS property is used to define the name of a named view progress timeline, which is progressed through based on the change in visibility of an element (known as the subject) inside a scrollable element (scroller). view-timeline is set on the subject.

The visibility of the subject 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. The name is then referenced in an animation-timeline declaration to indicate the element that will be animated as the timeline progresses. This can be the subject element, but it doesn’t have to be — you can animate a different element as the subject moves through the scrolling area.

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 view-timeline-name, {{cssxref(“view-timeline-axis”)}} and {{cssxref(“view-timeline-inset”)}} properties can also be set using the {{cssxref(“view-timeline”)}} shorthand property.

Values

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

none

</>

pub const none: #(String, String)

: The timeline has no name.

raw

</>

pub fn raw(value: String) -> #(String, String)

Enter a raw string value for view-timeline-name

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

unset

</>

pub const unset: #(String, String)

var

</>

pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for view-timeline-name. It will be wrapped in var() and have -- prepended.