Limited supportLimited browser support. Check compatibility before use.
Scrolling Limited support

Scroll-driven animations

The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.

Scrolling

Overview

The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
animation-range
115
115
26
115
26
DOM API
ScrollTimeline

The ScrollTimeline interface of the Web Animations API represents a scroll progress timeline (see CSS scroll-driven animations for more details).
115
115
26
115
26
axis

The axis read-only property of the ScrollTimeline interface returns an enumerated value representing the scroll axis that is driving the progress of the timeline.
115
115
26
115
26
ScrollTimeline

The ScrollTimeline() constructor creates a new ScrollTimeline object instance.
115
115
26
115
26
source

The source read-only property of the ScrollTimeline interface returns a reference to the scrollable element (scroller) whose scroll position is driving the progress of the timeline and therefore the animation.
115
115
26
115
26
ViewTimeline

The ViewTimeline interface of the Web Animations API represents a view progress timeline (see CSS scroll-driven animations for more details).
115
115
26
115
26
endOffset

The endOffset read-only property of the ViewTimeline interface returns a CSSNumericValue representing the ending (100% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
115
115
26
115
26
startOffset

The startOffset read-only property of the ViewTimeline interface returns a CSSNumericValue representing the starting (0% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
115
115
26
115
26
subject

The subject read-only property of the ViewTimeline interface returns a reference to the subject element whose visibility within its nearest ancestor scrollable element (scroller) is driving the progress of the timeline.
115
115
26
115
26
ViewTimeline

The ViewTimeline() constructor creates a new ViewTimeline object instance.
115
115
26
115
26
Other
css.properties.animation-range-end

The animation-range-end CSS property sets the point on the timeline where an animation should end.
115
115
26
115
26
CSS property
normal
115
115
26
115
26
Other
css.properties.animation-range-start

The animation-range-start CSS property sets the point on the timeline where an animation should start.
115
115
26
115
26
CSS property
normal
115
115
26
115
26
Other
css.properties.animation-timeline

The animation-timeline CSS property specifies the timeline used to control the progress of a CSS animation.
115
115
110
26
115
26
CSS property
scroll

The scroll() CSS function can be used with the animation-timeline property to create an anonymous scroll progress timeline, defining the scroller and axis of the timeline.
115
115
110
26
115
26
view

The view() CSS function is used with the animation-timeline property to create an anonymous view progress timeline based on when an element comes into view inside its nearest scroll container. You can adjust the tracking axis and the optional insets to control when the element is considered "in view".
115
115
114
26
115
26
animation-timeline included

`animation-timeline` included in shorthand
115
115
115
Other
css.properties.scroll-timeline

The scroll-timeline CSS shorthand property is used to define a named scroll progress timeline, which is progressed through by scrolling a scrollable element (scroller) between top and bottom (or left and right).
115
115
111
26
115
26
css.properties.scroll-timeline-axis

The scroll-timeline-axis CSS property is used to specify the scrollbar direction that will be used to provide the timeline for a scroll driven animation, which is progressed through by scrolling a scrollable element (scroller).
115
115
111
26
115
26
CSS property
block
115
115
26
115
26
inline
115
115
26
115
26
x
115
115
26
115
26
y
115
115
26
115
26
Other
css.properties.scroll-timeline-name

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.
115
115
111
26
115
26
css.properties.timeline-scope

The timeline-scope CSS property modifies the scope of a named animation timeline.
116
116
26
116
26
CSS property
all
116
116
26
116
26
none
116
116
26
116
26
Other
css.properties.view-timeline

The view-timeline CSS shorthand property defines a named view progress timeline's name, direction, and inset values.
115
115
114
26
115
26
css.properties.view-timeline-axis

The view-timeline-axis CSS property specifies the scroll direction to be used for a named view progress timeline.
115
115
114
26
115
26
CSS property
block
115
115
26
115
26
inline
115
115
26
115
26
x
115
115
26
115
26
y
115
115
26
115
26
Other
css.properties.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 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…
115
115
26
115
26
CSS property
auto
115
115
26
115
26
Other
css.properties.view-timeline-name

The view-timeline-name CSS property specifies the names of one or more named view progress timelines associated with the element.
115
115
111
26
115
26
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 3 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Before Firefox 112, zero scroll ranges are treated as 100% instead of 0%. See bug 1780865.
  • Supports the deprecated `horizontal` and `vertical` axis values, and not the `x` and `y` values.
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Support is currently reset-only. Including `animation` resets a previously-declared `animation-timeline` value to `auto`, but `animation-timeline` cannot be set via `animation`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Support is currently reset-only. Including `animation` resets a previously-declared `animation-timeline` value to `auto`, but `animation-timeline` cannot be set via `animation`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Support is currently reset-only. Including `animation` resets a previously-declared `animation-timeline` value to `auto`, but `animation-timeline` cannot be set via `animation`.
Notes 4 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • The syntax of the shorthand property uses the fixed order of name and then the axis.
  • Supports the deprecated `horizontal` and `vertical` axis values, and not the `x` and `y` values.
  • The `@scroll-timeline` at-rule is replaced with the longhand properties `scroll-timeline-name` and `scroll-timeline-axis` and the shorthand property `scroll-timeline`.
Notes 4 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • The syntax of the shorthand property uses the fixed order of name and then the axis.
  • Supports the deprecated `horizontal` and `vertical` values, and not the `x` and `y` values.
  • The `@scroll-timeline` at-rule is replaced with the longhand properties `scroll-timeline-name` and `scroll-timeline-axis` and the shorthand property `scroll-timeline`.
Notes 3 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • The syntax of the shorthand property uses the fixed order of name and then the axis.
  • The `@scroll-timeline` at-rule is replaced with the longhand properties `scroll-timeline-name` and `scroll-timeline-axis` and the shorthand property `scroll-timeline`.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (138)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (138)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (138)
Notes 2 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Now supports the `x` and `y` values, and also the deprecated `horizontal` and `vertical` values.
Notes 2 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Now supports the `x` and `y` values, and also the deprecated `horizontal` and `vertical` values.
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled

Syntax

CSS 
.progress-bar {
  animation: grow-progress linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

Live demo

Scroll() progressba-

Scroll-driven animations Scroll() progressba- demo.

PreviewFullscreen

View() fade in

Scroll-driven animations View() fade in demo.

PreviewFullscreen

Animation-range specified

Scroll-driven animations Animation-range specified demo.

PreviewFullscreen

Use cases

  • Using Scroll-driven animations

    The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features