Google suggests that if an animation may occur within the next 200ms [...] it's a good idea to use will-change on elements being animated. In most cases, any element in your app's current view that you plan to animate should have will-change enabled for the properties you intend to modify.
My question is, can you apply will-change using the Web Animations API before actually animating a property, and will it work as intended? Or is it too late in the process for will-change to be effective?
It seems that changes made through this API do not show up in DevTools as CSS properties, making it difficult to confirm if will-change was applied at all.
Consideration example:
this.animation = document.querySelector('#my-element').animate(
[
{
willChange: 'opacity', // applying will-change before changing any property
opacity: 'initial',
},
{
willChange: 'opacity',
opacity: 'initial',
offset: 0.01, // 1% into the animation
},
{
willChange: 'opacity',
opacity: 0.5,
offset: 0.5, // halfway through the animation
},
{
willChange: 'initial',
opacity: 'initial'
},
],
1000
);