Window: cancelAnimationFrame() method

The window.cancelAnimationFrame() method cancels an animation frame request previously scheduled through a call to window.requestAnimationFrame().

Syntax

js

cancelAnimationFrame(requestID)

Parameters

requestID

The ID value returned by the call to window.requestAnimationFrame() that requested the callback.

Return value

None (undefined).

Examples

js

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

const cancelAnimationFrame =
  window.cancelAnimationFrame || window.mozCancelAnimationFrame;

const start = Date.now();

let myReq;

function step(timestamp) {
  const progress = timestamp - start;
  d.style.left = `${Math.min(progress / 10, 200)}px`;
  if (progress < 2000) {
    // it's important to update the requestId each time you're calling requestAnimationFrame
    myReq = requestAnimationFrame(step);
  }
}
myReq = requestAnimationFrame(step);
// the cancellation uses the last requestId
cancelAnimationFrame(myReq);

Specifications

Specification
HTML Standard
# animationframeprovider-cancelanimationframe

Browser compatibility

BCD tables only load in the browser

See also