index.html

---
title: Animation.playbackRate
slug: Web/API/Animation/playbackRate
tags:
  - API
  - Animation
  - Interface
  - Property
  - Reference
  - Web Animations
  - playbackRate
  - web animations api
browser-compat: api.Animation.playbackRate
---
<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>

<p>The <code><strong>Animation</strong></code><strong><code>.playbackRate</code></strong> property of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> returns or sets the playback rate of the animation.</p>

<p>Animations have a <strong>playback rate</strong> that provides a scaling factor from the rate of change of the animation's {{domxref("DocumentTimeline", "timeline")}} time values to the animation’s current time. The playback rate is initially <code>1</code>.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">var <em>currentPlaybackRate</em> = <em>Animation</em>.playbackRate;

<em>Animation</em>.playbackRate = <em>newRate</em>;
</pre>

<h3 id="Value">Value</h3>

<p>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.</p>

<div class="note">
<p><strong>Note:</strong> Setting an animation’s <code>playbackRate</code> to <code>0</code> effectively pauses the animation (however, its {{domxref("Animation.playstate", "playstate")}} does not necessarily become <code>paused</code>).</p>
</div>

<h2 id="Examples">Examples</h2>

<p>In the <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> example, clicking or tapping the bottle causes Alice's growing animation (<code>aliceChange</code>) to reverse, causing her to shrink:</p>

<pre class="brush: js">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);
</pre>

<p>Contrariwise, clicking on the cake causes her to "grow," playing <code>aliceChange</code> forwards again:</p>

<pre class="brush: js">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);
</pre>

<p>In another example, the <a href="http://codepen.io/rachelnabors/pen/PNGGaV?editors=0010">Red Queen's Race Game</a>, Alice and the Red Queen are constantly slowing down:</p>

<pre class="brush: js">setInterval( function() {

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

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

}, 3000);
</pre>

<p>But clicking or tapping on them causes them to speed up by multiplying their <code>playbackRate</code>:</p>

<pre class="brush: js">var goFaster = function() {
  redQueen_alice.playbackRate *= 1.1;
}

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
</pre>

<h2 id="Specifications">Specifications</h2>

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
 <li>{{domxref("Animation")}}</li>
</ul>