Average Frames per Second

We want our animation's average frames per second (FPS) to be as close to 60 FPS as possible. Anything below 60 FPS will result in stutter, commonly known as jank, and will be noticed by users.

How to check our animation's FPS

We can use Chrome and Firefox devtools to check our animation's performance. Chrome and Firefox provide us with different information about animations, which is useful in ensuring the animation is running at the desired FPS.

Chrome devtools

We can see the actual frames per second during the animation’s execution using Chrome devtools’s performance tab. We’ll need to hit the record button and run our animation. Try to leave some time before and after our animation when recording to make sure that our timeline doesn’t get cut prematurely before the animation has started/ended. If you click on the Interactions dropdown, you’ll see an option for Animations. This will show you where in the timeline that animation happens.