Different transformOrigin in timeline

[Spekumi]

Hi,

 

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?

 

 

Thanks

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

[Diaco]

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

[Spekumi]

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?

[Diaco]

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%"});

[Spekumi]

Ok, thanks for the help!

That answers all my questions!