Animation: updatePlaybackRate() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

TheupdatePlaybackRate() method of theWeb Animations API'sAnimation Interface sets the speed of an animation after firstsynchronizing its playback position.

In some cases, an animation may run on a separate thread or process and will continueupdating even while long-running JavaScript delays the main thread. In such a case,setting theplaybackRate on the animationdirectly may cause the animation's playback position to jump since its playbackposition on the main thread may have drifted from the playback position where it iscurrently running.

updatePlaybackRate() is an asynchronous method that sets the speed of ananimation after synchronizing with its current playback position, ensuring that theresulting change in speed does not produce a sharp jump. After callingupdatePlaybackRate() the animation'splaybackRate isnot immediately updated.It will be updated once the animation'sready promise is resolved.

Syntax

updatePlaybackRate(playbackRate)

Parameters

playbackRate: The new speed to set. This may be a positive number (to speed up or slow downthe animation), a negative number (to make it play backwards), or zero (toeffectively pause the animation).

Return value

None (undefined).

Examples

A speed selector component would benefit from smooth updating ofupdatePlaybackRate(), as demonstrated below:

speedSelector.addEventListener("input", (evt) => {  cartoon.updatePlaybackRate(parseFloat(evt.target.value));  cartoon.ready.then(() => {    console.log(`Playback rate set to ${cartoon.playbackRate}`);  });});