Scroll-driven animations
The
animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.
Baseline Status:
This feature is currently Limited (not yet Baseline). Latest engine implementation shipped on Sep 15, 2025.
Desktop Browser Engine Support
Google Chrome
115
Supported
Mozilla Firefox
—
Unsupported
Apple Safari
26
Supported
Microsoft Edge
115
Supported
Mobile Browser Engine Support
Chrome Android
115
Firefox Android
—
Safari iOS
26
Specifications and References
MDN Browser Compat Data Keys:
api.ScrollTimeline ↗
api.ScrollTimeline.ScrollTimeline ↗
api.ScrollTimeline.axis ↗
api.ScrollTimeline.source ↗
api.ViewTimeline ↗
api.ViewTimeline.ViewTimeline ↗
api.ViewTimeline.endOffset ↗
api.ViewTimeline.startOffset ↗
api.ViewTimeline.subject ↗
css.properties.animation-range ↗
css.properties.animation-range-end ↗
css.properties.animation-range-end.normal ↗
css.properties.animation-range-start ↗
css.properties.animation-range-start.normal ↗
css.properties.animation-timeline ↗
css.properties.animation-timeline.scroll ↗
css.properties.animation-timeline.view ↗
css.properties.animation.animation-timeline_included ↗
css.properties.scroll-timeline ↗
css.properties.scroll-timeline-axis ↗
css.properties.scroll-timeline-axis.block ↗
css.properties.scroll-timeline-axis.inline ↗
css.properties.scroll-timeline-axis.x ↗
css.properties.scroll-timeline-axis.y ↗
css.properties.scroll-timeline-name ↗
css.properties.timeline-scope ↗
css.properties.timeline-scope.all ↗
css.properties.timeline-scope.none ↗
css.properties.view-timeline ↗
css.properties.view-timeline-axis ↗
css.properties.view-timeline-axis.block ↗
css.properties.view-timeline-axis.inline ↗
css.properties.view-timeline-axis.x ↗
css.properties.view-timeline-axis.y ↗
css.properties.view-timeline-inset ↗
css.properties.view-timeline-inset.auto ↗
css.properties.view-timeline-name ↗
id: scroll-driven-animations