Gary

Thanks, Rodrigo. The TweenLite.to still doesn't take the -50% into account. I would need it to be something like this, which I guess isn't supported. // first set up the position using a set() instance TweenLite.set(element, {x:"-50%", y:"-50%"}); // then animate it to the position (with the percentage still intact) TweenLite.to(element, time, {x:-100 - 50%,y:100 - 50%,z:-20}); I love what I am seeing with GSAP, but this appears to be something where CSS is superior. Is there a wishlist somewhere that I could add this to? I created a codepen that demonstrates it. http://codepen.io/anon/pen/ItymG

Thanks very much for the reply, Rodrigo. Although the name aligns with what I am talking about, I don't think the css transform-origin helps here, even though the default in css and GreenSock is "50% 50%". I'm talking about shifting the divs to the left and up by 50% in the 2D space (hence the -50% -50%). Imagine a canvas div that is 1000px by 1000px. I wish to center divs on the canvas, regardless of their extents, by placing them at left: 500px; top: 500px; To make them centered, I use transform: translate(-50%, -50%) This is the starting point, before I do 3D transforms. If I translate using translate3d, it will offset from there, including the x and y dimensions. The transform-origin affects how the rotate works, after the translate3d. Is there a way to combine percentage and absolute values in GreenSock, similar to the CSS calc function? Otherwise, it seems that GreenSock might be losing some flexibility by using the x and y properties for both translate and translate3d functionality. I know it is all just being munged into a matrix behind the scene, so having the ability to combine percentages and absolutes into the x and y properties would solve it. Thanks in advance!

I like to use a center origin on my animated div, which I achieve with: transform: translate(-50%, -50%) CSS lets me keep that constant and then, also, add a 3d transform. So, this is valid and works as expected: transform: translate(-50%, -50%) translate3d(-100, 100, -20); How can I do the same with greensock? I tried doing something like this, but no deal. { x: "-100px - 50%", y: "100px - 50%", z: -20 } Hopefully there's some simple answer. By the way, awesome API. I'm a huge fan in just one day. http://codepen.io/anon/pen/LvmrC