Translate3d support (?)

[stepanjakl]

Hi,

I am just wondering why the library doesn't support 'translate3d' transform property? Wouldn't it help as it uses GPU acceleration?

Thank you ✌️

[cameralibre]

I don't have the answer to your question, but hopefully some useful information anyway: as far as I understand it, the advantage of using the transform3d trick with CSS animation is that everything happens on the GPU, whereas a javascript animation would have to send updates from the CPU to the GPU 60 times a second before the GPU magic even happens.

From CSS GPU Animation: Doing It Right:

CSS-based animation has a very important feature: It works entirely on the GPU. Because you declare how an animation should start and finish, the browser can prepare all of the required instructions ahead of the animation’s start and send them to the GPU. In the case of imperative JavaScript, all that the browser knows for sure is the state of the current frame. For a smooth animation, we’d have to calculate the new frame in the main browser thread and send it to the GPU at least 60 times per second. Besides the fact that these calculations and sending of data are much slower that CSS animation, they also depend on the workload of the main thread:

[stepanjakl]

@cameralibre Indeed, so wouldn't it make sense for Anime library to support it?

[cameralibre]

I'm not enough of an expert to know, but this makes me doubt it.

[arpadgabor]

You could also use the will-change CSS Property in order to force the browser to use GPU on an element as a workaround.

[juliangarnier]

As others pointed out, GPU acceleration doesn't make everything faster in every situation, it can even make things slower in some cases. I'm thinking about adding a GPU acceleration option in the api that will add a will-change property to the target. But right now, adding a translateZ: 0 to your animation should do the trick.