Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Different transformOrigin in timeline

Recommended Posts



I'm trying to have different transformations such as rotation, scale, skew, etc to animate with different transformation origins.


The code pen shows a simple example of the problem where i'm trying to scale from top left origin and then rotation from center.



What I expected it to do was rotate from the center of the result of the scaling. So basically, i shouldn't be seeing the black background.


Is it possible to do this?




See the Pen raNEvx by Spekumi (@Spekumi) on CodePen

Link to comment
Share on other sites

Hi Spekumi  :)


the transform origin is relative to element with scale 1 ( Percentages : refer to the size of bounding box) , in your codepen element rotate with scale 2 and you see undesirable tween with transformOrigin: "50% 50%" .


pls check this out :


See the Pen gbONqB by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

I see.

So if I were to use only to(), the only way I could get the result I wanted is by using set() to change the element's position accordingly?

Link to comment
Share on other sites

yep , some thing like this :

tl.to("#greenBox", 1, {scale:2 , transformOrigin:"0% 0%"})
.set("#greenBox", {left:33 , top:33})
.to("#greenBox", 1, {rotation:360 , transformOrigin:"50% 50%"});
  • Like 1
Link to comment
Share on other sites

Ok, thanks for the help!

That answers all my questions! :)

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.