Search⌘ K
AI Features
Home
Courses
HTML5 Canvas: From Noob to Ninja - an interactive deep dive

Stopping Your Animation Loop

Explore methods to stop animation loops created with requestAnimationFrame in JavaScript. Understand using a control variable to pause animations and the role of cancelAnimationFrame in fully halting animation callbacks. This lesson helps you manage animation performance and control in HTML5 canvas projects.

We'll cover the following...

Once your requestAnimationFrame loop starts running, rarely will you ever need to tell it to stop. If you do need to stop your animation loop from doing unnecessary work, you can do something like the following:

Javascript (babel-node)
var running = true;
 
function animate() {
    if (running) {
        // do animation or drawing stuff
         
    }
    requestAnimationFrame(animate);
}

If your running variable were to ever be set to false, your animation loop will stop doing whatever work is being done. ...