When to use css property 'will-change'

02 Feb 2021 1 min

When we are writing the css which use RequestAnimationFrame such as animating opacity, height make sure your browser does not lag by letting it use graphic card.

If you want to make a animation smooth in your website, make sure to add will-change css property to the layer that moves a lot. For example transform or opacity property. This is a hint to the browser, this element should allowed all the time. Otherwise, when you upgrade or downgrade to a layer you incurs a cost.

/* other code */
will-change: transform opacity;

Check out more documentation topic here