Start/Stop an Animation

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 are written in pixels. These are the strings you saw that resemble “XXpx,” which requires the use of the JavaScript parseFloat() function to convert numeric values before making calculations.

Don’t use Number() to convert a string with "px" into a numerical value. This won’t work, and you’ll get a NaN value (Not a Number) as a result!

The requestAnimationFrame() function lets you ask the browser to execute a function as soon as possible, which updates the animation. It’s the browser’s job to make the animation as smooth as possible. The returned value of requestAnimationFrame() is an ID for the animation, which can be used to further modify it.

Here is how requestAnimationFrame() is used in combination with an animation function.