Is force3D the same as translateZ and rotation 0.01?

[AnimaChambers]

In reading some recent advice threads, I'm seeing some people recommend setting both translateZ and rotation both to 0.01, presumably to force use of the 3D matrix. However, I thought the GSAP property force3D:true did the same thing, and I further thought TweenMax set this by default, so you didn't need to worry about it.

 

Should I be using translateZ and rotation instead of the default force3D? I have a very resource-intensive application made with GSAP, so am trying to eke out every bit of performance I can. To date I've just been letting TweenMax optimize however it wants.

[Jonathan]

Hello AnimaChambers and welcome to the GreenSock Forums!

 

Using force3D:true will force the element to be rendered on its own rendering layer.

 

What your seeing when people add rotation:0.01 it helps with browser bugs to when translating x and y. The slight rotation in this case helps resolve browser bugs to prevent some shaky x (translateX) and y (translateY) translations. z:0.01 also fixes some browser bugs when used in some case as well.

 

Depending on what CSS properties you have on your element (opacity, transform-style:preserve-3d, backface-visibility, filter, perspective, translateZ, etc), dictates if your element will render as 3D. Since the presence of those properties tells the browser you are doing 3D. See stacking context:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

So force3D true tells the browser you want to force 3D on that element, force3D:auto is the default which removes the 3d transform on the element when the animation completes, since some elements will become blurry when an element has a 3d transform due to browser bugs, especially webkit browsers like Chrome and Safari. When force3D is set to true or the default auto, GSAP will use translate3d() on the element, or it will use matrix3d() depending if you have rotations on your element as well as the z property and other CSS properties that are used to support CSS 3D transforms.

 

You dont need to add rotation:0.01 or z:0.01 if you use force3D:true. You only add those the slight rotation and slight z properties if you need to fix some browser bugs to help with a smoother x and y translation or you can use the slight z to help other smoothness when having to rotate, since large increments of rotation's will intersect with the z-axis, and a slight z will help resolve some browser bugs. But again that is not a GSAP thing since animating with CSS transitions or CSS animation requires the same type of slight increments.

 

force3D is found in the CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• force3D
  As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

Does that help?

 

[AnimaChambers]

Thanks, yeah it helps heaps. I was just curious about why that advice was being given.