Equivalent to the will-change style using the experimental JavaScript API Web Animations API

Question

Equivalent to the will-change style using the experimental JavaScript API Web Animations API

Navigation

#1 by (0 votes)

-1

I've been reading the API documentation ( link ) and I've been looking Ways to use the equivalent of the will-change style ( link ) to improve the performance of the animations. I know that this style should be used very carefully but I am surprised that I can not find an equivalent in this API.

My question is, is there any way of suggesting to the browser what optimizations to perform in a similar way to will-change in CSS animations or the most I can hope for is to add a null offset with a 3D transformation to force the animation to be processed by the graphics card?

javascript css3 api

asked by Roberto Pintos López 03.09.2018 в 14:28

source

1 answer

Problem with WooCommerce Plugin Print ticket with JS or jQuery

score 0 · Answer 1

In the end, after a lot of searching I found that the API does not contemplate an equivalent to will-change because we aspire to be able to work without it. Any developer who wants to use will-change and WAAPI will have to apply this style to the elements they want to animate.

I encourage anyone interested in this API to read this article in CSS-Tricks:

link

In particular, the performance section:

link

The following part is very interesting (free translation, in the context of the WAAPI-based animations):

"If you have a delay in your animation, you should not consider using will-change." The lead author of the specification has posted some interesting advice in the Slack animator community, I do not think he'll mind if he repeats it here. :

If your animation has a positive delay you should not bother using will-change because the web browser will create layers at the beginning of the delay so that when the animation starts it will be ready to work "

(End of translation)

I hope it works for everyone who has the same doubt.