W3cubDocs

/Web APIs

XRSession: cancelAnimationFrame() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Syntax

js

cancelAnimationFrame(handle)

Parameters

handle

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

Return value

None (undefined).

Usage notes

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

Examples

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.

js

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
cancelAnimationFrame 79 79 No No 66 No No 79 No 57 No 11.2

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/XRSession/cancelAnimationFrame