animating transform-origin

[thomasragger]

Hi,

 

is it possible to animate the transform-origin for css3 3d transforms?

right now its only jumping in between the values. 

 

 

thank you!

[Rodrigo]

Hi and welcome to the forums,

 

Yep pretty much the changing the transform origin values works in an immediate way, but a workaround could be to set up a JS object with left and top values and since the engine can tween any numeric values you can tween those, then with an onUpdate callback you can pass those values to the element with a set instance, like this:

var div1 = $("div#div1"),
    tl1 = new TimelineMax(),
    transformOriginObj = {'left':0, 'top':0};

TweenLite.set(div1, {transformOrign:'0% 0%'});

tl1
.to(div1, 1, {rotation:45, transformOrigin:'0% 0%'})
.to(transformOriginObj, 1, {left:100, top:100, roundProps:'top, left', onUpdate:updateOrigin})
.to(div1, 1, {rotation:-45}, '-=1');

function updateOrigin()
{
  TweenLite.set(div1, {transformOrigin:transformOriginObj.left + '% ' + transformOriginObj.top +  '%'});
}

You can see it working here:

 

See the Pen vItdh by rhernando (@rhernando) on CodePen

 

Hope this helps,

Rodrigo.

[thomasragger]

Thats definitely a good solve, thank you! @greensock: whats the reason the engine sets the transformOrigin immediately? I'm sure there is one

[GreenSock]

Yeah, tweening transformOrigin is one of those things that could produce unintuitive results because of its very nature and the way css applies the transforms. Plus there are some bugs in browsers [ahem, Safari] that cause 3D transformOrigins not to work right, so we had to implement some interesting hackery with matrices to get everything consistent across browsers. I honestly didn't think folks would want to tween the transformOrigin, but that was probably a faulty assumption (as you've proven). We may revisit this in a future version, but in the mean time, Rodrigo's solution is a nice one.