Intent to prototype: scroll-linked animations

52 views

Skip to first unread message

Boris Chiou

unread,

Sep 16, 2021, 2:51:28 PM9/16/21

to dev-pl...@mozilla.org

Summary: It's sometimes desired to use an animation to tell a story where the user controls the progress of animation by scrolling or some other gestures. So basically, scroll-linked animations define a new way to control the timing of an animation by scrolling (i.e. scroll timeline). It could refer to the offsets of the container or any other elements in the document. In the spec, there are two major ways to manipulate the scroll-timeline: 1) CSS rule 2) Javascript (DOM interface). We would like to prototype this feature for CSS first, and then JS.

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1676779
Standard: https://drafts.csswg.org/scroll-animations-1/
Platform coverage: All
Preference: CSS support: "layout.css.scroll-linked-animations.enabled". JavaScript support: we may add different preferences based on the features we add in the future, e.g. "dom.animations.scroll-timeline.enabled".
DevTools bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1731112
Other browsers: Blink supports this since Chrome 89 (with “Experimental Web Platform Features” enabled). Webkit doesn't support it.
web-platform-tests: https://github.com/web-platform-tests/wpt/tree/master/scroll-animations