Remove the will-change property when animation ends

[William Bout]

As mentioned in this article, it can be useful to remove the will-change property once an animation ends for performance purposes.

[Benjamin De Cock]

Yup, I'm aware of the memory usage of will-change, but I ended up applying it and leaving it untouched when the animation ends because I can't make assumptions on how it's gonna be used, so it could be detrimental to automatically toggle it.

As a workaround, Animate Plus won't hardware-accelerate your CSS animations if the elements already have will-change defined in their style attributes. So, you can for example do the following to avoid will-change being applied:

animate({
  el: "p",
  translateX: 500,
  begin(arr) { arr.forEach(el => el.style.willChange = "auto"); }
});

Last but not least, keep in mind that in most cases, toggling will-change is a premature optimization. I'd only care about it if you plan on accelerating large surfaces.

[William Bout]

@bendc Thanks for the explanation.