Search⌘ K
Home
Courses
Animations in Angular

Average Frames per Second

Understand how to maintain average frames per second (FPS) close to 60 to avoid animation stutter. Learn to use Chrome and Firefox devtools for measuring FPS and ensuring animations are optimized by the browser. Discover how to interpret animation timelines, identify CSS and Web animations, and confirm optimal performance with browser optimization indicators.

We'll cover the following...

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 ...