Jump to content
GreenSock

thomasragger

animating transform-origin

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

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

right now its only jumping in between the values. 

 

 

thank you! :)

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×