Force3D Confusion

[Design by The Rues LLC 2 Likes (Newbie)]

Hello!

 

I am trying to figure out why this codepen (included), even though I have told it "force3D: true" in both the set() and to() methods, is not using "matrix3d" for the transform. I can't seem to figure out what the difference is between my codepen and the GreenSock codepen here: 

See the Pen kingu by GreenSock (@GreenSock) on CodePen

.

 

Can anyone point me to the difference? Maybe I just keep missing something simple...

 

Thanks,
Frank

See the Pen NRYVYO by frankrue (@frankrue) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi Frank,

 

Thanks for the demo.

 

Even though your demo is only doing 2D transforms (scaleX, scaleY) there is a translate3d() function being applied: http://prntscr.com/cs5ce8 which will offload that layer to the GPU. 

 

If you were to animate a 3D rotation property, like rotationX then a matrix3d() would be applied.

Try adding rotationX:180 to your tween to see the difference.

 

 

My assumption is that using translate3d takes less work than the matrix3d so matrix3d is only used when necessary.

 

Does that help clear things up?

[Design by The Rues LLC 2 Likes (Newbie)]

Carl -

 

Thanks for the quick response. I am working on an iPad-only project, and, for some reason, the matrix transforms are infinitely faster (even when just used for scale) than the direct use of scale(). I'm not sure why this is, or if this is new to the iOS family, or what, but I wanted to know if there is a way—even on the simplest of animations—to force the use of the matrix3d() css transform instead. I guess I had assumed force3D offered this, but, in the strictest sense, it is, technically using "3d".

 

Thoughts?

Frank

[Jonathan 5,176 Likes (Superhero)]

To force a matrix3d() you have to either add a slight rotation:0.01 and / or z:0.01 to your tween

[Design by The Rues LLC 2 Likes (Newbie)]

Ah. Jonathan, that did it. Adding `rotationX:0.01` forced it. Thank you.