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.