When to use CSS property 'will-change'

02 Feb 2021 •

When creating complex CSS animations—especially those involving transform, opacity, or other properties updated frequently—performance can sometimes take a hit. To ensure your animations run as smoothly as possible (aiming for that buttery 60fps), you can give the browser a “heads up” using the will-change property.

By adding will-change to an element, you are essentially telling the browser: “Hey, this element is going to change soon, so please get ready.” This allows the browser to perform optimizations ahead of time, such as promoting the element to its own layer and utilizing the GPU (Graphics Processing Unit) for rendering.

How to use it

Use will-change to specify exactly which properties you expect to undergo animation:

.animating-element {
  will-change: transform, opacity;
}

Important Warning

While it sounds like a magic bullet for performance, use it sparingly.

1. Don’t apply it to everything: Creating too many layers can actually consume more memory and slow down the browser.
2. Don’t use it prematurely: Apply it only when you notice performance issues or for complex animations.
3. remove it when done: Ideally, will-change should be toggled on via JavaScript right before an animation starts and removed after it ends to free up resources.

Check out the official documentation here for a deeper dive.