Search⌘ K

Start/Stop an Animation

Explore how to control animations in JavaScript by starting and stopping them using requestAnimationFrame and cancelAnimationFrame. Understand how to update element positions smoothly and manage animation frames to create fluid effects.

We'll cover the following...

Start an animation

The example code defines a function called moveBlock() which moves the block horizontally to the right. It grabs the current position of the block’s left border then adds the value contained in the movement variable. Next, the code calls the requestAnimationFrame() method to keep the animation going.

Position values ...