Scroll-driven animations
Limited availability
CSS scroll-driven animations are a type of CSS animations that don't run over time, but are instead driven by the user's scroll position.
Compatibility
- Chrome 115 Released on 2023-07-18
- Chrome Android 115 Released on 2023-07-21
- Edge 115 Released on 2023-07-21
- Firefox ❌ See bugzil.la/1676779
- Firefox for Android ❌ See bugzil.la/1676779
- Safari ❌ See webkit.org/b/222295
- Safari on iOS ❌ See webkit.org/b/222295
MDN docs
- ScrollTimeline
- ScrollTimeline.ScrollTimeline
- ScrollTimeline.axis
- ViewTimeline
- ViewTimeline.ViewTimeline
- ViewTimeline.endOffset
- animation-range property
- animation-range-end property
- animation-range-start property
- animation-timeline property
- animation-timeline/scroll property
- animation-timeline/view property
- scroll-timeline property
- scroll-timeline-axis property
- scroll-timeline-name property
- view-timeline property
- view-timeline-axis property
- view-timeline-inset property
- view-timeline-name property
Specifications
BCD data
- 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-start
- css.properties.animation-timeline
- css.properties.animation-timeline.scroll
- css.properties.animation-timeline.view
- css.properties.scroll-timeline
- css.properties.scroll-timeline-axis
- css.properties.scroll-timeline-name
- css.properties.view-timeline
- css.properties.view-timeline-axis
- css.properties.view-timeline-inset
- css.properties.view-timeline-name