scroll-timeline-name

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The scroll-timeline-name CSS property is used to define the name of a named scroll progress timeline, which is progressed through by scrolling a scrollable element (scroller) between top and bottom (or left and right). scroll-timeline-name is set on the scroller that will provide the timeline.

The name is then referenced in an animation-timeline declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action.

Note: If the element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.

The scroll-timeline-axis and scroll-timeline-name properties can also be set using the scroll-timeline shorthand property.

Syntax

css

scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;

Values

Allowed values for scroll-timeline-name are:

none: The timeline has no name.
<dashed-ident>: An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an animation-timeline property.

Note: <dashed-ident> values must start with --, which helps avoid name clashes with standard CSS keywords.

Formal definition

Initial value	`none`
Applies to	scroll containers
Inherited	no
Computed value	`none` or an ordered list of identifiers
Animation type	Not animatable

Formal syntax

scroll-timeline-name = 
  [ none | <dashed-ident> ]#

Examples

Creating a named scroll progress timeline animation

In this example, a scroll timeline named --squareTimeline is defined using the scroll-timeline-name property on the element with the ID container. This is then applied to the animation on the #square element using animation-timeline: --squareTimeline.

HTML

The HTML for the example is shown below.

html

<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

CSS

The CSS for the container sets it as the source of a scroll timeline named --squareTimeline using the scroll-timeline-name property. No scrollbar axis is defined here because the vertical axis will be used by default.

The height of the container is set to 300px, and the container is also set to create a vertical scrollbar if it overflows (the CSS height rule on the stretcher element below does make the content overflow its container).

css

#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --squareTimeline;
  position: relative;
}

The CSS below defines a square that rotates according to the timeline provided by the animation-timeline property, which is set to the --squareTimeline timeline named above.

css

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timeline: --squareTimeline;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

The stretcher CSS rule sets the block height to 600px, which creates content that overflows the container element, thereby creating scroll bars. Without this element, the content would not overflow the container, there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline.

Result

Scroll the vertical bar to see the square animate as you scroll.

Specifications

Specification
Scroll-driven Animations # scroll-timeline-name

Browser compatibility

BCD tables only load in the browser