Animation.updatePlaybackRate() lets you seamlessly transition the playback rate of an animation such that there is no visible jump in the animation. Current time is preserved at the instance the new playback rate takes effect.

Motivation

Animation.updatePlaybackRate() provides a means of ensuring that a change in playback rate results in a smooth transition. Current time is preserved at the moment the new playback rate takes effect. This method is presently available on Firefox and under development for Safari. Adding support in Chrome ensures consistency across browsers.

Demos

• https://wpt.fyi/results/web-animations/interfaces/Animation/idlharness.window.html?label=master
• https://wpt.fyi/results/web-animations/timing-model/animations/seamlessly-updating-the-playback-rate-of-an-animation.html?label=master

Documentation

• https://drafts.csswg.org/web-animations/#the-animation-interface
• https://drafts.csswg.org/web-animations/#seamlessly-updating-the-playback-rate-of-an-animation

Specification

Editor's draft

Status in Chromium

Blink components: Blink>Animation

Enabled by default (tracking bug) in:

• Chrome for desktop release 76
• Chrome for Android release 76
• Android WebView release 76

Consensus & Standardization

• Firefox: Shipped/Shipping
• Edge: No signal
• Safari: In development
• Web Developers: No signals

Owner

• kevers@chromium.org

Last updated on 2020-12-21