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

Specification link

Status: Specification being incubated in a Community Group

Status in Chromium

Blink components: Blink>Animation

Implementation status: Enabled by default (tracking bug)

Consensus & Standardization

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

Owner

• kevers@chromium.org

Last updated on 2021-08-29