TLDR Web Dev · ARTICLES & TUTORIALS

DON'T ANIMATE HEIGHT!

granola.ai5 min read

Summary from the TLDR Web Dev newsletter

A performance issue in the Granola note-taking app was caused by animating the `height` property in a CSS audio visualizer. Animating `height` triggers expensive layout, paint, and composite steps in the browser's rendering pipeline. To fix this, Granola replaced the `height` animation with a `transform` animation using two rectangles, achieving the visual effect of stretching without the performance hit.