JavaScript requestAnimationFrame Cancelling an Animation


To cancel a call to requestAnimationFrame, you need the id it returned from when it was last called. This is the parameter you use for cancelAnimationFrame. The following example starts some hypothetical animation then pauses it after one second.

// stores the id returned from each call to requestAnimationFrame
var requestId;

// draw something
function draw(timestamp) {
    // do some animation
    // request next frame

// pauses the animation
function pause() {
    // pass in the id returned from the last call to requestAnimationFrame

// begin the animation
function start() {
    // store the id returned from requestAnimationFrame
    requestId = requestAnimationFrame(draw);

// begin now

// after a second, pause the animation