Animation.playbackRate

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.

Syntax

// getting the playbackRate
var currentPlaybackRate = element.playbackRate;

// setting playbackRate
element.playbackRate = 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.

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:

var shrinkAlice = function() {
  aliceChange.playbackRate = -1;
  aliceChange.play();
}

// On tap or click, Alice will shrink.
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);

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

var growAlice = function() {
  aliceChange.playbackRate = 1;
  aliceChange.play();  
}

// On tap or click, Alice will grow.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

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

setInterval( function() {

  // Make sure the playback rate never falls below .4

  if (redQueen_alice.playbackRate > .4) {
    redQueen_alice.playbackRate *= .9;    
  }

}, 3000);

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

var goFaster = function() {

  redQueen_alice.playbackRate *= 1.1;

}

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);

Specifications

Browser compatibility

See also

• Web Animations API
• Animation