Timeline-scope - Property CSS

Description of the timeline-scope property.

The timeline-scope property is about scroll-driven animations. Recall that these animations are defined with the scroll-timeline or view-timeline properties on a container with scroll bars, and that they can then be applied to any descendant element of that container, or to the container itself with the animation-timeline.

The timeline-scope property allows you to extend this use to elements that are not descendants of the container.

Here is a concrete example as a reminder of how scroll-driven animations work. A container with a scroll bars defines a drive named --demo1 (The name can be chosen freely but the double dash is mandatory). The animation (a simple rotation) is applied to the frame of a wheel, which is included in the previous container.
To ensure that the wheel does not disappear due to scrolling, its position has been set to sticky.

⚠ The example doesn't work on Firefox (2024), but the CSS codes can still be viewed.

 

So far so good because the animated element (the wheel) is included in the scrolling container. But if we want to animate an element that is not a descendant of the scrolling container, it will not be possible. This is where the timeline-scope property comes in, which will allow us to use this scrolling to animate any element on the page.

Without use of timeline-scope

With use of timeline-scope

Here's the code with timeline-scope. The scroll bar is not the parent of the image, but by applying timeline-scope on the container, we find a correct functioning.

 

Main properties to know.

Here are the properties and functions you need to know to implement scroll-driven animations.

Tutorial : scroll-driven animations

overflow :

Overflow management, when the content is too large for the dimensions imposed on the element. With the value scroll or auto on the scrolling container.

animation-timeline :

Associates animation with something other than time, such as scrolling through an element.

animation-range :

Specifies the start and end point of the animation, in the case of scroll-driven animation.

scroll-timeline :

Summary property defining the parameters of an animation driven by the position of a scrollbar.

timeline-scope :

Sets the scope of a timeline for scroll-driven animation.

view-timeline :

Shorthand property defining the parameters of an animation based on the visibility of an element in the scroll window (scroll-driven animation).

view-timeline-inset :

Specifies an adjustment of the scroll box in the context of a scroll-driven animation.

scroll() :

Facilitates the implementation of scroll-driven animations.

view() :

Defines a Scroll Driver Animation.

Values for timeline-scope.

• timeline-scope: none;

  With a value of none, the timeline-scope property has no effect. However, this value can be useful for overriding an inherited value.

• timeline-scope: --id;

  --id is an identifier chosen by the user. It must begin with a double hyphen. This identifier is found in a descendant of the element as the value of the animation-timeline property. It is also found in the scroll bar as a value of scroll-timeline or view-timeline.

• timeline-scope: initial; (none) timeline-scope: inherit; timeline-scope: revert; timeline-scope: revertLayer; timeline-scope: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Examples.

These examples will not work on Firefox unless you have enabled the flag layout.css.scroll-driven-animations.enabled (access flags on Firefox).

Controlling the rotation of an image.

In this example, the ex1-progress scroll bar rotates the ex1-image image. The scroll bar is not a parent of the image. Their common parent bears the identifier ex1. Thanks to the timeline-scope property, it was possible to associate the rotation of the image to the scroll bar.

Notching effect.

Here we play with the scale factor of the image. The notching effect is achieved by the steps() function associated with the animation-timing-function property.

Managing along the three axes.

Here's an example with a slightly more complicated CSS. First of all, the cube must be built, which is done by successive transformation of six images representing the six faces of the cube (rotations and translations).

The cube once built is enclosed in three successive containers cube1, cube2 and cube3, each of them receives a rotation in one of the axes.

Animation of the timeline-scope property.

The timeline-scope property cannot be animated, like all other properties that are used to define animations.

Simulator.

The scrolling container (in blue) sets the --demo2 identifier associated with its vertical scrolling. Both wheel images attempt to use this identifier. For the first one, which is included in the scrolling container, it still works, but for the right wheel, you have to extend the --demo2 scope.
The timeline-scope property is applied to the green container higher up the tree, which includes the second wheel.

⚠ The operation will not be possible on Firefox (2024).

 

Browsers compatibility.

Notes:

(1) Can be enabled by setting the flag layout.css.scroll-driven-animations.enabled to true.

1

timeline-scope
property

Estimated overall support.

74%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

1

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

timeline-scope property historic.

• Scroll-driven Animations - Level 1

  Regarding timeline-scope. First introduction to the timeline-scope property.
  

  October 25, 2022

  Working Draft.

  

  

  

See also, about scroll-driven animations.

Scroll-driven animations are grouped in the Scroll-driven Animations module. The timeline-scope property is included in this module, along with the following definitions:

Properties:

animation-range

Specifies the start and end point of the animation, in the case of scroll-driven animation.

animation-range-end

Specifies the end point of the animation, in the case of scroll-driven animation.

animation-range-start

Specifies the starting point of the animation, in the case of scroll-driven animation.

scroll-timeline

Summary property defining the parameters of an animation driven by the position of a scrollbar.

scroll-timeline-axis

Specifies which axis (vertical or horizontal) should synchronize the scroll-driven animation.

scroll-timeline-name

Sets an identifier for a scroll-driven animation.

Timeline-scope

Sets the scope of a timeline for scroll-driven animation.

view-timeline

Shorthand property defining the parameters of an animation based on the visibility of an element in the scroll window (scroll-driven animation).

view-timeline-axis

Defines which axis (vertical or horizontal) is used for a scroll-driven animation.

view-timeline-inset

Specifies an adjustment of the scroll box in the context of a scroll-driven animation.

view-timeline-name

Sets an identifier for a scroll-driven animation.

Functions:

scroll()

Facilitates the implementation of scroll-driven animations.

⚠

view()

Defines a Scroll Driver Animation.