Intent to Ship: Scroll-driven animations

Skip to first unread message

Robert Flack

Apr 28, 2023, 2:44:12 PM4/28/23
to blink-dev

Contact emails




ScrollTimeline and ViewTimeline are an extension to the Web Animations spec which allow developers to use the position of a scroller or the position of an element within a scroller as an input 'time' rather than the default monotonic clock time. This enables fast scroll-based animations, such as a shrinking navigation bar, without requiring user script execution. They can be declared and instantiated both via CSS and Javascript used in CSS animations and Web Animations.

Blink component


Search tags


TAG review

The concerns raised in the initial review have been addressed with resolutions called out in the subsequent review.

TAG review status


Link to origin trial feedback summary


Interoperability and Compatibility

# animation-duration A notable change was made to the animation-duration property. In particular the animation-duration now supports 'auto' values and the initial value of animation-duration is changed to 'auto'[1] which aligns a CSS animation's default duration with one constructed via the web animations API[2], and allows the default duration to be automatically computed for scroll driven animations as well as the upcoming group and sequence effects. Visually this is identical for existing animations because an "auto" duration on a plain document timeline results in an intrinsic iteration duration[3] of 0. However, the "auto" value will now be visible in the developer observed style so code which may have parsed the time value expecting a 0 could now break. E.g. parseFloat(getComputedStyle(elem).animationDuration) results in NaN for "auto" duration compared to 0. On Canary the computed duration for 0-duration animations is accessed on 0.05% of page loads. As a baseline, computed webkit-font-smoothing property (i.e. a property often not intentionally accessed) is accessed on 0.02% of page loads for the same set. [1] [2] [3]

Gecko: In development (

WebKit: Positive ( Updated request posted at

Web developers: Positive

Other signals:


Scroll driven animations can be built as a progressive enhancement to an otherwise static scrolling page. It is also possible to polyfill the API - see for a wpt-tested polyfill that is slightly out of date.


No known risks.

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?



The current tooling provided by DevTools supports showing/editing of the used keyframes and the newly introduced CSS properties. There is active work being done to improve dedicated tooling over time.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?


Is this feature fully tested by web-platform-tests?


Flag name


Requires code in //chrome?


Tracking bug

Sample links

Estimated milestones

Shipping on desktop115
Shipping on Android115
Shipping on WebView115

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

There a few issues still being resolved: Awaiting consensus on specific timing and conditions regarding when we repeat style/layout to avoid animation flicker. - We agree on roughly how deferred timelines should work, just need resolution on the specific syntax. Minor API Tweaks: - Support explicit auto duration in shorthand - Requiring <dashed-ident> timeline names

We expect to resolve these before the branch to ensure they don't represent a source of compat risk. The remaining scroll-animations issues are expected not to change the existing syntax / behavior and will be considered as extensions for the API in the future.

Link to entry on the Chrome Platform Status

Links to previous Intent discussions

Intent to prototype: Intent to Experiment:

This intent message was generated by Chrome Platform Status.

Alex Russell

Apr 28, 2023, 3:21:24 PM4/28/23
to Robert Flack, blink-dev
The easiest LGTM1 ever. Thank you for shipping this!

You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To view this discussion on the web visit

Yoav Weiss

May 1, 2023, 8:34:15 AM5/1/23
to Alex Russell, Robert Flack, blink-dev

Mike Taylor

May 1, 2023, 10:38:21 AM5/1/23
to Yoav Weiss, Alex Russell, Robert Flack, blink-dev
Reply all
Reply to author
0 new messages