DEV Community

Cover image for My New Favorite CSS Trick: will-change
Thea
Thea

Posted on

My New Favorite CSS Trick: will-change

I recently discovered a handy CSS trick that's made a noticeable difference in how I handle animations and transitions. Meet the useful will-change property, a simple but effective way to tell the browser about upcoming changes to an element's properties.

What is will-change?

Honestly, until a few days ago, I had no idea this property even existed. The will-change property is a way to tell the browser, "Hey! I'm going to change these specific properties on this element soon, so you might want to get ready for that."

It's like allowing the browser to optimize and prepare for the upcoming changes. Impressive, isn't it?

How to Use will-change

Using will-change is super simple. You just list out the properties that you plan to animate or transition, like this:

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

.my-element:hover{
   transform: scale(2);
   opacity: 0;
Enter fullscreen mode Exit fullscreen mode

This line of code tells the browser, "Get ready because I'm going to be changing the transform and opacity properties on this element."

Why You Should Care

Let me give you a real-world example of why will-change is so awesome. Imagine you're working on a complex animation that involves multiple elements moving around, scaling, and fading in and out. Without will-change, the browser might struggle to keep up, leading to janky animations.

But when you use will-change, you're essentially giving the browser a chance to optimize and prioritize the right resources for those specific property changes.

A Word of Caution

Now, as with any powerful tool, will-change should be used responsibly. If you overuse it or specify properties that never actually change, you could end up wasting system resources and potentially causing performance issues.

Use will-change judiciously and only for elements that will undergo complex animations or transitions. Specify only the properties that you know will change, and be sure to remove the will-change declaration once the animation or transition is complete.

Give It a Try!

I can't recommend will-change enough, especially if you're working on complex animations or transitions. It's a game-changer, and it's so easy to implement.

Top comments (13)

Collapse
 
ben profile image
Ben Halpern

Big +1. I've used this (again judiciously) alongside requestAnimationFrame in my JavaScript to massively improve performance on an app which needed it.

Collapse
 
highflyer910 profile image
Thea

Yes, I agree! Using will-change alongside requestAnimationFrame is such an amazing combo for silky smooth animations. Glad to hear it massively improved the performance of your app!:)

Collapse
 
ben profile image
Ben Halpern

Yeah — specifically the performance improvements were needed on mobile.

Phones have come a long way but are still sometimes resource-constrained.

Collapse
 
bayuangora profile image
Bayu Angora

I use this code for darkmode purpose:

* {
color: #ddd;
transition: color 1s, background 1s, border 1s, text-shadow 1s;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
background: #000;
}
Enter fullscreen mode Exit fullscreen mode

Is it good if I add will-change to that code like this?

* {
color: #ddd;
transition: color 1s, background 1s, border 1s, text-shadow 1s;
will-change: transition, color, background, border, text-shadow;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
background: #000;
will-change: background;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
highflyer910 profile image
Thea

Applying will-change to the * selector is generally not recommended, as it can lead to unneeded optimizations across too many elements. Instead, try using will-change only on the specific elements that will animate or change colors/backgrounds/etc during the dark mode transitions.

Collapse
 
mrwensveen profile image
Matthijs Wensveen

Why can't the browser figure this out itself when parsing the css? It literally says "when you hover element X, change properties Y and Z". I wonder if most browsers don't already do this. It can't hurt to be explicit, of course, and maybe there are cases that are hard to detect, but it feels like this shouldn't be necessary most of the times.

I had never heard of this property before, so I learned something today. Thanks!

Collapse
 
mardeg profile image
Mardeg

Will this be useful for SMIL animated inline SVG elements?
If I have a circle element that will move vertically and change transparency should I add will-change: cy, fill-opacity; to the CSS for it?

Collapse
 
highflyer910 profile image
Thea

Yes, will-change can be very useful for optimizing animated SVG elements. For your example of a circle moving vertically with changing opacity, adding will-change: cy, fill-opacity; to that circle is an appropriate use case.

Collapse
 
dagnelies profile image
Arnaud Dagnelies • Edited

I never used that. I wonder how much difference it makes in practice. Also, if I understand it right after digging into it a bit, applying it on too many elements may hurt performance. Since it's difficult to estimate the benefit / cost, it's quite tricky to use.

Collapse
 
highflyer910 profile image
Thea • Edited

You're right - will-change needs to be used carefully. Applying it carelessly can hurt performance more than help.

The key is using it only on elements with complex animations. Using it too much or leaving it on when not needed can slow things down.

In practice, will-change can greatly improve animation performance for elements that move, change transparency, or reposition a lot. You'll notice the biggest improvements on less powerful devices or when many animated elements are on the screen at once.

I'd recommend using will-change only on the specific elements being animated. That way, you get the performance benefits while avoiding potential slowdowns.
Thanks for bringing up this point!

Collapse
 
eoyugi profile image
Elly Okello

congratulations for an amazing piece ,learned about a new property ,will-change .why its important to give browser heads up of when intending to change certain properties. I'll sure try it out

Collapse
 
jangelodev profile image
João Angelo

Hi Thea,
Your tips are very useful
Thanks for sharing

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

Thanks for making us aware and the caution given.