Don't animate height
Our app was mysteriously using 60% CPU and 25% GPU on my M2 MacBook. It turned out this was due to a tiny CSS animation! In this post, I show how to find expensive animations, why some are so expensive, and how to make many animations much cheaper. Along the way, we'll learn how the browser renders CSS animations and how to use Chrome's dev tools for performance profiling. The problem While building Granola, a note-taking app, I noticed it was using 60% CPU and 25% GPU on my M2 MacBook: Activ