Get the latest tech news
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.
Activity Monitor showing high CPU and GPU usage What is Granola spending those cycles on? Those three green "dancing bars" at the bottom of the Granola window constantly flash with layout shift and repainting. This optimization demonstrates how understanding the browser's rendering pipeline and choosing the right CSS properties for animations can dramatically improve performance.
Or read this on Hacker News
