Window.cancelAnimationFrame

  • Revision slug: Web/API/window.cancelAnimationFrame
  • Revision title: window.cancelAnimationFrame
  • Revision id: 423483
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{SeeCompatTable}}

Summary

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

Syntax

window.cancelAnimationFrame(requestID);

Note: At the moment you have to use window.mozCancelAnimationFrame for Firefox.

Parameters

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

Example

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>{{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> At the moment you have to use <code>window.mozCancelAnimationFrame</code> for Firefox.</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">Example</h2>
<pre class="brush: js">
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     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>
<p>{{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</p>
<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