TLDR Web Dev · ARTICLES & TUTORIALS
DON'T ANIMATE HEIGHT!
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.