majman

Yes! Super helpful - thanks for taking the time to respond!

thanks for the response, Rodrigo! I'm aware of how 3d transforms will kick in the GPU. My question was a little different than the original question - perhaps I should have started a different thread. To clarify, the code you wrote above: TweenLite.to(el, 1, {y:100}); would result in the el's style attribute being updated every tick with a new transform matrix; I was looking into the performance of a transform matrix vs translate3d - both of which trigger the GPU, but seem to have different performance as far as setting the elements attribute goes. have a look at the results for matrix, matrix3d, and translate3d here: http://jsperf.com/translate3d-vs-xy/49

Ok, here's an obvious approach -- not sure how it stacks up against the gs default matrix tween: var el = $('#el'), props = {x: 0, y: 0}, style = el[0].style; TweenMax.to(props, 0.7, {x: 100, y: 100, ease:Back.easeInOut.config(1), onUpdate: function(){ style.WebkitTransform = 'translate3d(0px, ' + props.y + 'px, 0)'; } });

I'm also doing a bit of research into this topic. I was digging around on jsperf to see how translate3d compared to matrix transforms, and it seems that translate3d wins out pretty consistently: http://jsperf.com/translate3d-vs-xy/49 Jack, I don't suppose you know of a non-trivial way to default to translate3d when a tween is only using xyz props?

Thanks for the info, Carl!

Oh, I should also probably mention that I'm working in and primarily concerned with webkit browsers

here's a fiddle to demonstrate: http://jsfiddle.net/majman/cyEZS/1/ I don't think it has anything to do with using set() prior to... i'm starting to wonder if it's the opacity tween causing problems. fromTo() was equally as problematic in experimenting with it.

Thanks Basta, I don't think that's the issue - I'm actually applying tweens to svg paths. I should mention that using from() works totally fine. for example: TweenMax.set(letter, {css:{transformOrigin:"50% 50%", fill:c}}); TweenMax.from(letter, 1, {scale:0, opacity:0, ease:Elastic.easeOut.config(1), delay: i*.1}); That works as expected. But trying to accomplish the same thing with .to() breaks.

Everything seems to to set correctly, and the opacity transition works fine, but nothing happens with scale: TweenMax.set(letter, {opacity:.5, scale:.4, transformOrigin:"50% 50%", fill:c}); TweenMax.to(letter, 1, {opacity:1, scale:1, ease:Elastic.easeOut.config(1), delay: i*.1}); I don't think anything too crazy is going on with my code... Anybody else run into a similar problem?