We’d like to propose a mechanism for web animations to be driven by scrolling instead of by time.
We have a draft proposal which provides two ways to accomplish this: via script (the
ScrollTimeline interface), and via CSS (the
This proposal was inspired by Dean Jackson’s earlier proposal on www-style, and is substantially similar to the “timelines” portion of Google’s Generalized Animations proposal. We’d like to use this as a starting point for further work.
An earlier version of our proposal also provided a mechanism for a regular time-driven animation to be triggered by scrolling past a certain scroll position (inspired by the
animation-trigger property from Dean’s proposal, and similar to the “triggers” portion of Generalized Animations).
However, this part was dropped, because we realized that the types of web animations that web authors are most likely to want to trigger based on scrolling, are CSS transitions (as opposed to CSS animations), and we can’t trigger CSS transitions from the compositor (thus negating the main advantage of the proposal over triggering in an
onscroll handler or
We’re still interested in doing something for triggers, but are not sure exactly what. Ideas are welcome!
Relationship with AnimationWorklet
This proposal has some overlap with AnimationWorklet.
Some use cases of AnimationWorklet, such as parallax and “hidey-bars”, can be expressed using a scroll-linked animation. For these cases, we believe it to be an advantage to express these declaratively, and using a mechanism that’s in some ways easier to implement.
Other use cases of AnimationWorklet, such as custom timing functions and animating scroll offsets, cannot be expressed using a scroll-linked animation, making AnimationWorklet still useful as an independent proposal.