Repository navigation
Scroll-Triggered Animations #1433
Description
Description
Scroll-Triggered Animations provides authors a way to set up playback control of CSS Animations declaratively.
The timeline-trigger (shorthand) and animation-trigger CSS properties can be used to automate specified actions on a CSS animation based on the scroll position of an associated scroll container. The trigger-scope property controls the visibility of trigger names declared by timeline-trigger and accessed by animation-trigger.
Specification
https://drafts.csswg.org/animation-triggers-1/
web-feature
No response
Test Links
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-alternate.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-fill-mode-both.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-fill-mode-none.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-once.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-play-forwards-backwards.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-play.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-repeat.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-replay.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-state.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/animation-trigger-untriggered-animations-exposed.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/timeline-trigger-none-auto.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/timeline-trigger-source-starts-in-trigger-range.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/timeline-trigger-toggle.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/trigger-scope-add.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/trigger-scope-in-scope-source.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/trigger-scope-named.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/trigger-scope-oof.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/trigger-scope-out-of-scope-source.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/trigger-scope-scoped-tree-order.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/trigger-scope-tree-order-ancestor-chain.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
- https://wpt.fyi/results/scroll-animations/animation-trigger/trigger-scope-unscoped-tree-order.tentative.html?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger
Additional Signals
The feature is launched in chrome (chromestatus).
Position request have been filed in Mozilla and WebKit.
Chrome usage counter.
Note: there is an open PR to create a web-feature for scroll-triggered animations.
Reacted by John P. Green, Bramus, Santi, Gary Mazzeo, G. Luke Mendelman-Haenn, Erlend Ydse, Yehonatan Daniv, Sean Yen and Roland Franke
Activity
github-actions commentedon Sep 22, 2026
This comment was automatically generated based on the information you provided. Please don't edit it.
Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include
web-features: <feature-id>.To find feature IDs, use the web-features explorer.
Feature Scroll-triggered animations
IntersectionObserverAPI. Not to be confused with scroll-driven animations.ydaniv commentedon Oct 6, 2026
@DavMila we will have to publish an FPWD ASAP in order for this to be considered (: