window.requestAnimationFrame()

  • Revision slug: Web/API/window.requestAnimationFrame
  • Revision title: Window.requestAnimationFrame()
  • Revision id: 460291
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{APIRef("Window")}}

The Window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

Note: Your callback routine must itself call requestAnimationFrame() if you want to animate another frame at the next repaint.

You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. That repaint may occur up to 60 times per second for foreground tabs (the exact rate is up to the browser to decide), but may be reduced to a lower rate in background tabs.

The callback method is passed a single argument, a {{domxref("DOMHighResTimeStamp")}}, which indicates the time, in miliseconds, at which the repaint is scheduled to occur.

Syntax

requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome
requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Safari

Parameters

callback
A parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a {{domxref("DOMHighResTimeStamp")}}, which indicates the time, in miliseconds, at which the repaint is scheduled to occur.

Return value

requestID is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to {{domxref("window.cancelAnimationFrame()")}} to cancel the refresh callback request.

Example

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = null;

var d = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0 {{property_prefix("webkit")}}
24.0
4.0 {{property_prefix("moz")}}
23
10.0
  • {{property_prefix("-o-")}} {{compatversionunknown}}
  • 15.0
6.0 {{property_prefix("webkit")}}
unprefixed in nightlies
requestID return value 23.0 {{property_prefix("webkit")}}
24.0
{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}} 10.0
  • {{property_prefix("-o-")}} {{compatversionunknown}}
  • 15.0
{{CompatNo}}
unprefixed in nightlies
Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatNo}} 10.0 {{property_prefix("webkit")}}

0.16 {{property_prefix("webkit")}}

{{CompatUnknown}} {{CompatUnknown}} 14.0 6.0 {{property_prefix("webkit")}}
requestID return value {{CompatUnknown}}   {{CompatUnknown}} {{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Gecko notes

Prior to Gecko 11.0 {{geckoRelease("11.0")}}, mozRequestAnimationFrame() could be called with no input parameters. This is no longer supported, as it's not likely to become part of the standard.

Prior to Gecko 23, the callback parameter was a {{domxref("DOMTimeStamp")}} instead of a {{domxref("DOMHighResTimeStamp")}}. DOMTimeStamp only has milisecond precision, but DOMHightResTimeStamp has a minimal precision of ten microseconds.

Chrome notes

The correct call in Chrome to cancel the request is currently window.cancelAnimationFrame(). Older versions, window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame(), have been deprecated but are still supported for now.

Specification

{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}

See also

Revision Source

<p>{{APIRef("Window")}}</p>
<p>The <strong><code>Window.requestAnimationFrame()</code></strong> method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.</p>
<div class="note">
  <strong>Note:</strong> Your callback routine must itself call <code>requestAnimationFrame()</code> if you want to animate another frame at the next repaint.</div>
<p>You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. That repaint may occur up to 60 times per second for foreground tabs (the exact rate is up to the browser to decide), but may be reduced to a lower rate in background tabs.</p>
<p>The callback method is passed a single argument, a {{domxref("DOMHighResTimeStamp")}}, which indicates the time, in miliseconds, at which the repaint is scheduled to occur.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="brush: js">
<em>requestID</em> = window.requestAnimationFrame(<em>callback</em>);       // Firefox 23 / IE 10 / Chrome
<em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>);    // Firefox &lt; 23
<em>requestID</em> = window.webkitRequestAnimationFrame(callback); // Safari
</pre>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<dl>
  <dt>
    <code>callback</code></dt>
  <dd>
    A parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a {{domxref("DOMHighResTimeStamp")}}, which indicates the time, in miliseconds, at which the repaint is scheduled to occur.</dd>
</dl>
<h3 id="Return_value">Return value</h3>
<p><code>requestID</code> is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to {{domxref("window.cancelAnimationFrame()")}} to cancel the refresh callback request.</p>
<h2 id="Notes" name="Notes">Example</h2>
<pre class="brush: js">
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = null;

var d = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress &lt; 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);
</pre>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>10.0 {{property_prefix("webkit")}}<br />
          24.0</td>
        <td>4.0 {{property_prefix("moz")}}<br />
          23</td>
        <td>10.0</td>
        <td>
          <ul>
            <li>{{property_prefix("-o-")}} {{compatversionunknown}}</li>
            <li>15.0</li>
          </ul>
        </td>
        <td>6.0 {{property_prefix("webkit")}}<br />
          unprefixed in nightlies</td>
      </tr>
      <tr>
        <td><code>requestID</code> return value</td>
        <td>23.0 {{property_prefix("webkit")}}<br />
          24.0</td>
        <td>{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}</td>
        <td>10.0</td>
        <td>
          <ul>
            <li>{{property_prefix("-o-")}} {{compatversionunknown}}</li>
            <li>15.0</li>
          </ul>
        </td>
        <td>{{CompatNo}}<br />
          unprefixed in nightlies</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>BlackBerry Browser</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatNo}}</td>
        <td>10.0 {{property_prefix("webkit")}}</td>
        <td>
          <p>0.16 {{property_prefix("webkit")}}</p>
        </td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>14.0</td>
        <td>6.0 {{property_prefix("webkit")}}</td>
      </tr>
      <tr>
        <td><code>requestID</code> return value</td>
        <td>{{CompatUnknown}}</td>
        <td>&nbsp;</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Specification" name="Specification">Gecko notes</h3>
<p>Prior to Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> could be called with no input parameters. This is no longer supported, as it's not likely to become part of the standard.</p>
<p>Prior to Gecko 23, the callback parameter was a {{domxref("DOMTimeStamp")}} instead of a {{domxref("DOMHighResTimeStamp")}}. <code>DOMTimeStamp</code> only has milisecond precision, but <code>DOMHightResTimeStamp</code> has a minimal precision of ten microseconds.</p>
<h3 id="Chrome_notes">Chrome notes</h3>
<p>The correct call in Chrome to cancel the request is currently&nbsp;<code>window.cancelAnimationFrame()</code>. Older versions, <code>window.webkitCancelAnimationFrame()</code> &amp; <code>window.webkitCancelRequestAnimationFrame()</code>, have been deprecated but are still supported for now.</p>
<h2 id="Specification" name="Specification">Specification</h2>
<p>{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{domxref("window.mozAnimationStartTime")}}</li>
  <li>{{domxref("window.cancelAnimationFrame()")}}</li>
  <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
  <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
  <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li>
  <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
  <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
</ul>
Revert to this revision