1

I've been trying out javascript animations and noticed performance differences when I was using will-change property and transform3D() to separate animated element to a new layer for gpu rendering. It happens when I'm trying to animate scaling of the element, which also has a border-radius css property. Codepen here

Without will-change property browser will perform additional Rasterize Paint (in rasterizer thread1 on a screenshot)

With will-change there is no Rasterize Paint action (screenshot).

And it gets much worse when I'm trying to animate multiple elements at once in real-life project (especially it hurts on mobile). (with will-change, without will-change)

So the question is: how will-change manages to provide that kind of optimization even though it's supposed to do basically the same thing as transformZ(0) (creating new layer for gpu-rendering). And is there any way to optimize this animation without using will-change?

Nikita Vasilev
  • 13
  • 3

1 Answers1

1

will-change basically does the same thing (as of today) as the translateZ(0) hack: it pulls the element out onto a new rendering layer. The difference is that will-change is telling the browser your intent, namely, that you will be changing this property; whereas with translateZ(0) that is merely a coincidental side effect.

So will-change is just a more modern way of accomplishing the same thing, and as such, it's also less widely supported than 3D transforms.

It's conceivable that will-change will get more powerful over time. I can imagine it being used for colour changes (using a GPU shader), particular positioning changes (e.g. position of an absolutely positioned element), and so on.

Thomas
  • 174,939
  • 50
  • 355
  • 478
  • Thanks for your reply Thomas! I forgot I had this question :) You're correct but I would like to add one more thing. Additionally to what `translateZ(0)` does, `will-change` has an ability to rasterize the layer. And thanks to that sometimes it can help to improve performance. The effect of rasterization could be easily seen during scaling up. Here is a codepen to demonstrate [link](https://codepen.io/DNFcode/pen/YMaNZE) – Nikita Vasilev Apr 18 '19 at 09:10
  • Very interesting! Note that the `transform: translateZ(0);` in your codepen does nothing, because it's immediately overridden by an inline style applied by `TweenMax`. But that style uses `translate3d` so I suppose it has the same effect (and indeed I see both elements being created on separate layers). – Thomas Apr 18 '19 at 09:18