Window.cancelAnimationFrame

  • Revision slug: DOM/window.cancelAnimationFrame
  • Revision title: window.cancelAnimationFrame
  • Revision id: 361023
  • Created:
  • Creator: paul.irish
  • Is current revision? No
  • Comment saf copat

Revision Content

{{ SeeCompatTable() }}

Summary

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

Syntax

window.mozCancelAnimationFrame(requestID);               // 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

23.0 {{ property_prefix("webkit") }}

{{ CompatGeckoDesktop("11.0") }} {{ property_prefix("moz") }} 

10

{{ CompatUnknown() }}

supported unprefixed in nightlies
6.0 {{ property_prefix("webkit") }}

Feature Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }}

{{ CompatUnknown() }}

{{ CompatGeckoMobile("11.0") }} {{ property_prefix("moz") }} {{ 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()") }}

{{ languages( { "zh-cn":"zh-cn/DOM/window.cancelAnimationFrame" } ) }}

Revision Source

<p>{{ SeeCompatTable() }}</p>
<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="eval">
window.mozCancelAnimationFrame(<em>requestID</em>);               // Firefox
</pre>
<h2 id="Parameters" name="Parameters">Parameters</h2>
<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="Notes" name="Notes">Example</h2>
<pre class="deki-transform">
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>
<p>{{ CompatibilityTable() }}</p>
<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>
          <p>23.0 {{ property_prefix("webkit") }}</p>
        </td>
        <td>
          <p>{{ CompatGeckoDesktop("11.0") }} {{ property_prefix("moz") }}&nbsp;</p>
        </td>
        <td>
          <p>10</p>
        </td>
        <td>{{ CompatUnknown() }}</td>
        <td>
          <p>supported unprefixed in nightlies<br />
            6.0 {{ property_prefix("webkit") }}</p>
        </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>
          <p>{{ CompatUnknown() }}</p>
        </td>
        <td>{{ CompatGeckoMobile("11.0") }} {{ property_prefix("moz") }}</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>
<p>{{ languages( { "zh-cn":"zh-cn/DOM/window.cancelAnimationFrame" } ) }}</p>
Revert to this revision