Animation: playbackRate property

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⁩.

The Animation.playbackRate property of the Web Animations API returns or sets the playback rate of the animation.

Animations have a playback rate that provides a scaling factor from the rate of change of the animation's timeline time values to the animation's current time. The playback rate is initially 1.

Value

Takes a number that can be 0, negative, or positive. Negative values reverse the animation. The value is a scaling factor, so for example a value of 2 would double the playback rate.

Note: Setting an animation's playbackRate to 0 effectively pauses the animation (however, its playState does not necessarily become paused).

Examples

In the Growing/Shrinking Alice Game example, clicking or tapping the bottle causes Alice's growing animation (aliceChange) to reverse, causing her to shrink:

const shrinkAlice = () => { aliceChange.playbackRate = -1; aliceChange.play(); }; // On tap or click, Alice will shrink. bottle.addEventListener("mousedown", shrinkAlice); bottle.addEventListener("touchstart", shrinkAlice);

Contrariwise, clicking on the cake causes her to "grow," playing aliceChange forwards again:

const growAlice = () => { aliceChange.playbackRate = 1; aliceChange.play(); }; // On tap or click, Alice will grow. cake.addEventListener("mousedown", growAlice); cake.addEventListener("touchstart", growAlice);

In another example, the Red Queen's Race Game, Alice and the Red Queen are constantly slowing down:

setInterval(() => { // Make sure the playback rate never falls below .4 if (redQueenAlice.playbackRate > 0.4) { redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 0.9); } }, 3000);

But clicking or tapping on them causes them to speed up by multiplying their playbackRate:

const goFaster = () => { redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 1.1); }; document.addEventListener("click", goFaster); document.addEventListener("touchstart", goFaster);