W3cubDocs

/Web APIs

Window: cancelAnimationFrame() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

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

Syntax

cancelAnimationFrame(requestID)

Parameters

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

Return value

None (undefined).

Examples

const start = document.timeline.currentTime;

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> # animationframeprovider-cancelanimationframe>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`cancelAnimationFrame`	24	12	2311–23	15	76–7	25	2314–23	14	76–7	1.5	4.4	76–7