Window.cancelAnimationFrame

  • Revision slug: Web/API/Window.cancelAnimationFrame
  • Revision title: Window.cancelAnimationFrame
  • Revision id: 489181
  • Created:
  • Creator: teoli
  • Is current revision? Yes
  • Comment

Revision Content

{{APIRef}}{{SeeCompatTable}}

Summary

Cancels an animation frame request previously scheduled through a call to {{domxref("window.requestAnimationFrame()")}}.

Syntax

window.cancelAnimationFrame(requestID);

Note: Prior to Firefox 23, the function is vendor-prefixed window.mozCancelAnimationFrame(). See the compatibility table, below, for other browser implementations.

Parameters

requestID
The ID value returned by the call to {{domxref("window.requestAnimationFrame()")}} that requested the callback.

Examples

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().

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

window.cancelAnimationFrame(myReq);

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 21.0 {{property_prefix("webkit")}}
24.0
{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}
23.0
10 {{CompatUnknown}} 6.0 {{property_prefix("webkit")}}
unprefixed in nightlies
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}
23.0
{{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Specification

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

See also

  • {{domxref("window.mozAnimationStartTime")}}
  • {{domxref("window.requestAnimationFrame()")}}

Revision Source

<div>
 {{APIRef}}{{SeeCompatTable}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Cancels an animation frame request previously scheduled through a call to {{domxref("window.requestAnimationFrame()")}}.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
window.cancelAnimationFrame(<em>requestID</em>);
</pre>
<div class="note">
 <p><strong>Note:</strong> Prior to Firefox 23, the function is vendor-prefixed <code>window.mozCancelAnimationFrame()</code>. See the compatibility table, below, for other browser implementations.</p>
</div>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<dl>
 <dt>
  <code>requestID</code></dt>
 <dd>
  The ID value returned by the call to {{domxref("window.requestAnimationFrame()")}} that requested the callback.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: js">
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().

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

window.cancelAnimationFrame(myReq);
</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>21.0 {{property_prefix("webkit")}}<br />
     24.0</td>
    <td>{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}<br />
     23.0</td>
    <td>10</td>
    <td>{{CompatUnknown}}</td>
    <td>6.0 {{property_prefix("webkit")}}<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>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>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br />
     23.0</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
 <li>{{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{domxref("window.mozAnimationStartTime")}}</li>
 <li>{{domxref("window.requestAnimationFrame()")}}</li>
</ul>
<!--languages( { "zh-cn":"zh-cn/DOM/window.cancelAnimationFrame" } )-->
Revert to this revision