view-timeline-inset | CSS-Tricks

The CSS view-timeline-inset property allows you to more finely control where an element’s animation begins and/or ends when scrolled into view. It can be used both by itself and in combination with the animation-range property.

.scrolly {
  view-timeline-inset: auto;
}

.scrolly-scrolly {
  view-timeline-inset: -10%;
}

.scrolly-scrolly-scrolly {
  view-timeline-inset: 200px 20%;
}

view-timeline-inset is defined in Scroll-driven Animations Module Level 1 specification, which is currently in Editor’s Draft at the time of writing. This means the content is pretty early on in the drafting process and may change. However, the latest Chrome, Safari, and Edge all support it. Please be warned that there may be inconsistencies across browsers and implementations.

Syntax

view-timeline-inset: [ [ auto | <length-percentage> ]{1,2} ]#

In plain English, this means that view-timeline-inset accepts one or two values, one being the auto keyword and the other being either a CSS length or percentage value. Let’s dig into this next.

Initial value: auto
Applies to: all elements
Inherited: no
Percentages: relative to the corresponding dimension of the relevant scrollport
Computed value: a list consisting of two-value pairs representing the start and end insets each as either the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation: by computed value typeValues
auto: Sets the inset of the animation to the scroll-padding value for the scrollport. If scroll-padding isn’t set then it will generally be 0 though a browser can choose to calculate a different value.
<length-percentage>: A length or percentage to inset the animation from the edges of the scrollport. If you use a negative value it will be an outset, making the animation start or end outside the scrollport.

It can take up to two values at a time. When using a single value the inset or outset will be set both on the beginning and the end of the animation. Which sides depends on which axis is used for the animation.

The first value sets the inset or outset for where the animation begins (typically the bottom of the scrollport for animations using the y axis and the right side of the scrollport for those using the x-axis) and the second value handles the inset or outset for where the animation ends (typically the top of the scrollport for animations using the y-axis and the left side of the scrollport for those using the x-axis).

Note: The view-timeline-axis property determines the axis used. In the case of it being set to inline or block, the writing-mode may also affect which sides are the beginning and ending of the animation.

Use Cases

In the following demo you can use view-timeline-inset to choose where the highlighted card is or to expand the animation to highlight more than one card.

The default view-timeline-inset: 10% 70% highlights just one card and places the highlight on the left side of the scrollport (which in this case is slightly smaller than the width of the viewport).

Setting view-timeline-inset to 70% 10% would move the highlighted card to the right.

Narrowing or widening the gap between the beginning and ending inset will also affect how fast the card is highlighted or whether more than one card is highlighted. You could, of course, modify the animation keyframes to also change where the highlighted card is, but using view-timeline-inset allows you to use the same keyframes on multiple sets of cards while still giving you control over where the highlighted card would be, how many cards are highlighted, and whether the highlight happens quickly as you scroll or highlights at a more leisurely pace.

The animation-range () and view-timeline-inset properties can be used to do very similar things. Compare and contrast their settings in this demo: