monks/view_timeline_inset

The view-timeline-inset CSS property is used to specify one or two values representing an adjustment to the position of the scrollport (see {{glossary(“Scroll container”)}} for more details) in which the subject element of a named view progress timeline animation is deemed to be visible. Put another way, this allows you to specify start and/or end inset (or outset) values that offset the position of the timeline.

This can be combined with or used instead of {{cssxref(“animation-range”)}} and its longhand properties, which can be used to set the attachment range of an animation along its timeline. See CSS scroll-driven animations for more details.

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

Values

auto_

</>

pub const auto_: #(String, String)

: If set, the corresponding {{cssxref(“scroll-padding”)}} (or equivalent longhand value) for that edge of the scrollport is used. If this is not set (or set to auto), the value will usually be 0, although some user agents may use heuristics to determine a different default value if appropriate.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

length

</>

pub fn length(value: monks_of_style.Length) -> #(String, String)

length value of view-timeline-inset

raw

</>

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

Enter a raw string value for view-timeline-inset

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-inset. It will be wrapped in var() and have -- prepended.