TLDR Web Dev · ARTICLES & TUTORIALS

DON'T ANIMATE HEIGHT!

granola.ai5 min read

Summary from the TLDR Web Dev newsletter

A note-taking app had high CPU and GPU usage due to a CSS animation affecting the height property of a visualizer. Animating the height property triggers expensive layout and paint recalculations in the browser's rendering pipeline. Replacing the height animation with a transform animation, specifically using two rectangles with translate transformations instead of scaleY, drastically reduces CPU and GPU usage.