[Rotate with transformOrigin not like in css]

You are missing understand me. My problem don not letting me flatten transform. The point is I wanna know how I can do animation like css in my demo with GSAP that all.Pls help me :((

[Rotate with transformOrigin not like in css]

On 7/26/2022 at 1:25 AM, Carl said:

thx for the demo.

i saw you have a lot of inline styles that set various transforms using transform:matrix() and transformOrigin.

 

I'd recommend using gsap for the transforms in these cases

 

I stripped out the inline styles in the svg and used gsap with a simple tween so you can better see where the origin is

 

 

 

Feel free to tweak the numbers of course.

I know what you say but the problem is i can not flatten transforms :(

 

You change my transformOrigin that is not what I excepted but still thanks you for your advice

[Rotate with transformOrigin not like in css]

7 hours ago, Carl said:

thx for the demo.

i saw you have a lot of inline styles that set various transforms using transform:matrix() and transformOrigin.

 

I'd recommend using gsap for the transforms in these cases

 

I stripped out the inline styles in the svg and used gsap with a simple tween so you can better see where the origin is

 

 

 

Feel free to tweak the numbers of course.

 

 

You change my transformOrigin that is not what I excepted but still thanks you for your advice

[Rotate with transformOrigin not like in css]

here is my code pen 

[Rotate with transformOrigin not like in css]

This is what i have when i rotate headMc by transform css.

This is a result which I have when I use Gsap :
    gsap.set('.headMc', { transformOrigin: '170.880953107561px 148.666667393276px', rotation: -45  });

What I have to do to get the result when I use css like the first image;

Link svg :

See the Pen jOzLYVV by daiproxomhoa (@daiproxomhoa) on CodePen