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...
For further actions, you may consider blocking this person and/or reporting abuse
Big +1. I've used this (again judiciously) alongside
requestAnimationFrame
in my JavaScript to massively improve performance on an app which needed it.Yes, I agree! Using
will-change
alongsiderequestAnimationFrame
is such an amazing combo for silky smooth animations. Glad to hear it massively improved the performance of your app!:)Yeah — specifically the performance improvements were needed on mobile.
Phones have come a long way but are still sometimes resource-constrained.
I use this code for darkmode purpose:
Is it good if I add will-change to that code like this?
Applying
will-change
to the * selector is generally not recommended, as it can lead to unneeded optimizations across too many elements. Instead, try usingwill-change
only on the specific elements that will animate or change colors/backgrounds/etc during the dark mode transitions.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!
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?
Yes,
will-change
can be very useful for optimizing animated SVG elements. For your example of a circle moving vertically with changing opacity, addingwill-change: cy, fill-opacity;
to that circle is an appropriate use case.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.
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!
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
Hi Thea,
Your tips are very useful
Thanks for sharing
Thanks for making us aware and the caution given.