This feature adds scroll-position-based control of animations, e.g. playing, pausing, and resetting an animation. A common pattern on pages across the web is to kick off an animation when a scroll position is reached. Developers often do this by using JavaScript to manually detect that an element is within its scroll container's viewport and to kick off a corresponding animation (e.g. perhaps sliding that element into view). Many of such use cases are based on information that can be provided declaratively. This feature gives authors the ability to create such interactions declaratively via CSS, allowing the user agent to offload the handling of this interaction to a worker thread. The API also includes JavaScript interfaces that allow the feature to be extended to web animations in addition to CSS animations.
Kicking off animations after having reached a desired scroll position is a common pattern on the web. Achieving this requires JavaScript to know when to trigger an animation. However, in many cases, all the information needed for many use cases can be declaratively specified. This feature provides authors a robust, reliable, performant and convenient way to set up such animations in response to scrolling.
Docs: https://github.com/explainers-by-googlers/scroll-triggered-animations/blob/main/README.md
Samples: https://davmila.github.io/sta-demos/explore
Explainers: https://github.com/explainers-by-googlers/scroll-triggered-animations