Your Frame Rate

So far, I’ve been extolling the virtues of requestAnimationFrame and how it can make your animations really smooth. The word smooth isn’t really a good way to measure something. It won’t hold up under scrutiny! The way we measure smoothness is by using a number you are probably very familiar with called the frame rate. You are probably already familiar with frames rates from watching movies or playing video games where you are told that the higher your frame rate, the better the result is. Guess what? That same holds for us in the HTML world also.

With requestAnimationFrame, your frame rate is typically around 60 frames per second (FPS). To repeat that differently, this means your requestAnimationFrame function and related code have the potential to refresh your screen 60 times every second. This number wasn’t arbitrarily chosen. It is the upper limit on how quickly your laptop screen, computer monitor, phone display, etc. can physically update your screen.

Your Frame Rate May Go Lower than 60 FPS

If your animation loop is very complex and does a lot of work or your browser is swamped with other things, your frame rate will be lower than 60 frames per second. In general, your browser will do the right thing to ensure your animation is extremely smooth, but be prepared for some random slowdowns.

Now, there will be times when you may want to deliberately slow your animation down. You may not need your animation loop getting called 60 times every second. If you want to throttle your animation’s speed, you can do something like the following:

Press + to interact
var framesPerSecond = 10;
 
function animate() {
    setTimeout(function() {
        requestAnimationFrame(animate);
 
        // animating/drawing code goes here
 
 
    }, 1000 / framesPerSecond);
}

Notice that we are using setTimeout to delay when the next requestAnimationFrame call gets made. You can see an example of this code being used in the Letter Cycler example where we are deliberately slowing our animation down to 10 FPS.