graywithanA

Deal. Thanks again to everyone for the promt and informative repsonses.

Thanks for all the responses. After restarting my computer the animation is much smother. I've also cleared my cache so that 1.15 is now loading. @Jonathan: is the rotation trick necessary now that 1.15 sets force3D to 'auto'? My understanding was that the point of that trick is to force 3D transforms which is now done automatically. Is there another reason to add the slight rotation to my transforms?

I've created a simply pen that depending on which button is pressed either animates the transform x value using TimelineLite & TweenLite, the transform x value using only TweenLite, the scale using TimelineLite & TweenLite, or scale using only TweenLite. Despite trying all of the suggestions I've found on the forums I cannot seem to get these simply animations to be smooth. They always seem to jump at least once throughout the animation. It does seem like the animations that don't use Timeline are slightly smoother but they still aren't as smooth as I expected. The scale animations seem smoother that the x animations If it is of any relevance I'm on a 2.4 GHz Core i7 Macbook Pro with 16GB RAM running Mavericks 10.9.5. Firefox seems a bit smoother than Chrome and Safari appears the be the worst of them all. Having read through several threads about the same or similar problems I've tried the following things: -Animate x instead of left to allow for sub-pixel animation -Added z:0.01 or rotateZ:0.01 -Similarly tried using force3d:true -Made sure that the element being animated is position:absolute and that it's parent is position:relative Is there no hope of getting these animations to be smooth? Is this just an issue with my computer / browser combo? Am I missing something here? I've seen a handful jQuery library's out there that seem to perform pan / zoom smoothly so I'm assuming that I must be doing something wrong since GSAP is far superior to jQuery in the animation realm. I'm thrilled with this library so far and the forum community as well. Thank you to everyone in advance. Please help.

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!

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

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.

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.

@kittichai I'm currently about to attempt the Ken Burns effect using Greensock and was wondering if you ever got it working to your satisfaction. Care to share any code, tips, etc? Thanks!