Limited Availability
Scrolling
Scroll-triggered animations
Scroll-triggered animations start and stop CSS animations when an element is within or outside a scrolling range. It's an alternative to applying styles with the
IntersectionObserver API. Not to be confused with scroll-driven animations.
Baseline Status:
This feature is currently Limited (not yet Baseline). Latest engine implementation shipped on Mar 13, 2026.
Desktop Browser Engine Support
Google Chrome
146
Supported
Mozilla Firefox
—
Unsupported
Apple Safari
—
Unsupported
Microsoft Edge
146
Supported
Mobile Browser Engine Support
Chrome Android
146
Firefox Android
—
Safari iOS
—
Specifications and References
MDN Browser Compat Data Keys:
api.AnimationTrigger ↗
css.properties.animation-trigger ↗
css.properties.animation-trigger.none ↗
css.properties.timeline-trigger ↗
css.properties.timeline-trigger-activation-range ↗
css.properties.timeline-trigger-activation-range-end ↗
css.properties.timeline-trigger-activation-range-end.normal ↗
css.properties.timeline-trigger-activation-range-start ↗
css.properties.timeline-trigger-activation-range-start.normal ↗
css.properties.timeline-trigger-activation-range.normal ↗
css.properties.timeline-trigger-active-range ↗
css.properties.timeline-trigger-active-range-end ↗
css.properties.timeline-trigger-active-range-end.auto ↗
css.properties.timeline-trigger-active-range-end.normal ↗
css.properties.timeline-trigger-active-range-start ↗
css.properties.timeline-trigger-active-range-start.auto ↗
css.properties.timeline-trigger-active-range-start.normal ↗
css.properties.timeline-trigger-active-range.auto ↗
css.properties.timeline-trigger-active-range.normal ↗
css.properties.timeline-trigger-name ↗
css.properties.timeline-trigger-name.none ↗
css.properties.timeline-trigger-source ↗
css.properties.timeline-trigger-source.auto ↗
css.properties.timeline-trigger-source.none ↗
css.properties.timeline-trigger.auto ↗
css.properties.timeline-trigger.none ↗
css.properties.timeline-trigger.normal ↗
css.properties.trigger-scope ↗
css.properties.trigger-scope.all ↗
css.properties.trigger-scope.none ↗
id: scroll-triggered-animations