Web/API/XRSession/cancelAnimationFrame

Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The cancelAnimationFrame() method of the XRSession interface cancels an animation frame which was previously requested by calling requestAnimationFrame.

Syntax

xrSession.cancelAnimationFrame(handle);

Parameters

handle: The unique value returned by the call to requestAnimationFrame() that previously scheduled the animation callback.

Return value

None.

Usage notes

This function has no effect if the specified handle cannot be found.

Example

In the example below we see code which starts up a WebXR session if immersive VR mode is supported. Once started, the session schedules its first frame to be rendered by calling requestAnimationFrame().

The pauseXR() function shown at the bottom can be called to suspend the WebVR session, in essence, by canceling any pending animation frame callback. Since each frame callback schedules the next one, removing the callback terminates updating of the WebXR scene.

const XR = navigator.xr;

let requestHandle = null;
let xrSession = null;

if (XR) {
  XR.isSessionSupported('immersive-vr')
  .then((isSupported) => {
    if (isSupported) {
      startXR();
    }
  });
}

function frameCallback(time, xrFrame) {
  xrSession.requestAnimationFrame(frameCallback);
  
  // Update and render the frame
}

async function startXR() {
  xrSession = XR.requestSession("immersive-vr");

  if (xrSession) {
    stopButton.onclick = stopXR;
    requestHandle = xrSession.requestAnimationFrame(frameCallback);
  }
}

function pauseXR() {
  if (xrSession && requestHandle) {
    xrSession.cancelAnimationFrame(requestHandle);
    requestHandle = null;
  }
}

Specifications

Specification	Status	Comment
WebXR Device APIThe definition of 'XRSession.cancelAnimationFrame' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`cancelAnimationFrame()`	Chrome Full support 79	Edge Full support 79	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android Full support 79	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 11.2

Legend

Full support: Full support
No support: No support