CSS 3 animations. translate3d vs matrix

Question

I do projects that require smooth transitions and animations. We recently switched from using Javascript animation to CSS in almost 100% of cases.

I found that using translate3d provides very nice animations on both the mobile and the desktop.

My current animation style is as follows:

CSS

.animation-up{ transform: translate3d(0, -100%, 0); } .animation-down{ transform: translate3d(0, 100%, 0); } .animation-left{ tranform: translate3d(-100%, 0, 0); } .animation-right{ tranform: translate3d(-100%, 0, 0); } 

Recently, I began to study different structures that seem to be buzzing a lot. Two in a specific GreenSock ( http://greensock.com/tweenmax ) and Famo.us ( http://famo.us ). Both show amazing frame rates and amazing performance.

I notice that they use martix conversion.

Greensock example (using matrix):

 <div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"></div> 

Famo.us example (using a 3D matrix):

 <div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"></div> 

My question is ... What is the difference between translate3d and matrix? Is there a significant improvement using the matrix over translate3D? Is there any other method that gives even better results?

I was pleased with translate3D, but I want to know which method will give the best animations and is looking for guidance on what might be.

Answer 1

Nit is correct - in most real-world scenarios, performance will be indistinguishable between translate3d () and matrix3d ​​(). Ultimately, all transformations are transformed into a matrix at some level, because that’s how the GPU does things (at least that's my understanding).

Matrix () and matrix3d ​​() contain not only positional data, but also rotation, scale, and skew.

You asked if there is a performance difference between matrices () and matrix3d ​​(), and the answer is sometimes. matrix3d ​​() (or any 3D-related transformation) usually causes the browser to “digitize” this element (think about how it takes photos of its pixels and stores them on the GPU), which then manipulates faster because its pixels separated from the rest of the screen / layers. "Typically, you'll see smoother animations using this technique. However, there is little cost to first calculate something (transfer pixels to the GPU).

The other side down to matrix3d ​​() is that most browsers capture pixels of a certain size (the natural size of the element), so if you scale it, everything looks fuzzy or pixelated. Again, this usually only matters if you scale something UP . Oh, and layering something takes memory. If you run out of GPU memory, this may slow down. In my experience, this rarely happens.

The recent version of GreenSock GSAP will automatically use any technique that is likely to provide the smoothest results. If you only change position, it will use translate3d (). If you scale and move, it will use translate3d () and scale (). If you have a twist or skew, it will switch to matrix3d ​​() because it is the fastest. Starting with version 1.15.0, it uses force3D: "auto", which means that during the animation the twin will use 3D during the animation, but then switch back to 2D when the animation ends to free up the GPU memory. This is a highly optimized system. You can make him use the technique you want.

I stumbled upon some interesting discoveries when analyzing CSS performance and JS animations. I recorded a screencast that you can check: http://greensock.com/css-performance/ (be sure to read the comments).

Answer 2

matrix3d() both translate3d() and matrix3d() are matrix transformations.

translate3d(dx, dy, dz) :

matrix3d(a1, a2, a3, a4, b1, b2, b3, b4, c1, c2, c3, c4, d1, d2, d3, d4) :

The former is simply a reduction of only the movement of the element, while the latter allows you to specify the entire matrix. Since they use the same basic structures, their performance will be almost the same (for operations of a similar scale).

Answer 3

Another thing you should consider is that the animation matrices will not give you all the options you use to animate transforms, especially if you set the rotation.

The most obvious is the rotation animation (0deg) for the rotation (360deg). The equivalent matrix is ​​the same (obviously). You need to set the transforms with a rotation, otherwise it will not work.

In complex transformations, as a rule, setting transformations with matrices will not give you the animation that you expect.

But if you use only translations, as the name implies, this is all a problem