Don't animate height (granola.ai)

Article summary

The article discusses how a small CSS animation in a note-taking app was causing high CPU and GPU usage. The animation was a height transition that triggered layout recalculation, repainting, and re-compositing. The author explains how to use Chrome's dev tools to identify performance issues and how to optimize the animation by using transform instead of height. This optimization significantly reduced CPU and GPU usage.

Main themes

• CSS animation performance
• browser rendering pipeline
• optimization techniques
• GIF vs DOM animation
• audio volume visualizer usefulness
• performance metrics and measurement

What commenters say

• Some commenters suggest that using a simple animated GIF would be more efficient than the animated DOM elements.
• Others argue that GIFs are not a good solution for animations that need to be interactive or responsive to real-time data.
• The usefulness of the audio volume visualizer in the note-taking app is debated, with some finding it informative and others seeing it as unnecessary or even annoying.
• Some commenters propose alternative solutions, such as using SVG or canvas elements, or providing hints to the browser with CSS properties like contain or will-change.
• The article's focus on optimizing performance is seen as relevant and important, but some commenters question the magnitude of the performance gain achieved.
• There is disagreement about the impact of dynamic scaling and battery optimization on the perceived performance metrics.
• Some commenters reflect on the past, noting that older technologies like Flash were able to achieve good performance with less powerful hardware.