Making the web fast: Reaching 60FPS

Yesterday I shared a teaser of a side project I’m working on. I was optimizing animations to run at 60 frames per second, when I found some interesting tricks to achieve it. In this article, I’ll answer some questions about it.

Tweet with animation teaser!

In-depth

The primary animation we’ll focus on is opening the menu which contains four separate parts that transition all at once:

  1. The surface moves down based on the height of the backdrop.
  2. The content in the surface moves to a lower opacity to shift focus to the backdrop.
  3. The backdrop becomes visible by going to full opacity.
Chrome DevTools with Paint flashing enabled

Conclusion

The web can be really fast and small animations on interaction, like the one described above, can improve the overall quality of your experience.

Developer focusing on Progressive Web Apps.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store