Prevent GSAP from using translate3d?

[graywithanA]

Hello all,

 

I just started using GSAP yesterday and I'm really excited by what I've seen so far.  I've searched around the forums and read through the docs but can't seem to find any reference to the situation I'm experiencing.

 

I'm using TimelineLite and TweenLite to animate the position (x,y) and scale of an image.  The animation is working fine but GSAP seems to be using translate3d to animate the x,y and is using scale() to animate the scale.  This is great for browsers that support translate3d but I need this animation to work in IE9 as well.

 

I can't seem to reproduce the issue in codepen.  As you can see the animation is done using matrix() in my codepen example.

 

Here's the line of code I'm using to add the tween to the timeline in my actual project.

tl.add(TweenLite.to(el, 10, {x:500, y:500, scale:2, ease:Linear.noEase, transformOrigin:"left top"}));

Am I wrong that x,y, and scale can all be handled with a 2d translate?  Is it the syntax I'm using that's causing the use of translate3d?  Is there some sort of feature detection happening that knows my browser supports 3d so it's using it?  What other css, js, etc might be causing the use of translate3d in my actual project?

 

Thanks in advance!

 

EDIT: I removed the codepen link because I wasn't thinking and started messing around with it and it lost all relevancy to this post.  Sorry about that.

[Jonathan]

Hello graywithanA, and welcome to the GreenSock Forum!

 

GSAP will automatically detect the support of 2D and 3D transforms. GSAP is smart enough to know if the browser supports or doesn't support a particular CSS property. So if a certain browser does not support 3D transforms, but supports 2D transforms.. then it will apply 2D Transforms.

 

I would recommend you look at the CSSPlugin Docs for more information on how GSAP handles 2D and 3D transforms:

 

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

 

Also when testing IE9 .. make sure it is real IE9 standalone. Using the emulation or document modes in IE can give you results that are not accurate. It is better to test in IE9 standalone so you know your tests are not skewed.

 

Hope this helps!

[graywithanA]

Hey Jonathan,

 

Thanks for the speedy reply!  I had read through those docs prior to posting but wasn't able to find anything that explicitly stated that GSAP would revert to 2D transforms if the browser doesn't support 3D.  I suspected it would but I wanted to be sure.  Unfortunately I don't currently have a way to test IE9 so I wasn't able to confirm my suspicion myself.

 

There is mention that 3D transforms will be ignored in non compatible browsers but I needed to be sure that didn't mean that my 2D transforms (that were being animated using translate3d) would be ignored.

 

Good looking out on the tip for testing in IE9, I hope to have a standalone version at my disposal soon.

 

Thanks again.

[graywithanA]

Another question: If I use force3D:true, will it still revert to 2D transforms if the browser doesn't support 3D?

[Jonathan]

Hello again graywithanA,

 

If you look here you will see that IE9 supports 2D Transforms:

 

http://caniuse.com/#search=transform

 

GSAP can even animate 2D all the way back to IE6 .. see this article called Why GSAP:

 

https://greensock.com/why-gsap/

 

GSAP will do all the heavy lifting for you. GSAP can animate any property or object and is performance driven. So as long as the browser version supports the transform property, than GSAP can animate it. In the case where GSAP does not detect 3D transforms, it will use translate() or matrix().

 

I tested your example in IE9 standalone and it used matrix().

 

Happy Tweening!

[Jonathan]

In that case yes.. but you would want to use force3D:"auto"

 

But if you are using the most up to date version of GSAP.. then force3D:"auto" is now the default.

 

GSAP is very smart to know if a browser supports 2D or 3D. It will never add 3D transforms to a browser that does not support it.

[graywithanA]

I am using 1.15.0 so I'll just leave that one alone since it's set to 'auto' by default.  Sounds like everything works how I thought / hoped!