Rotate with transformOrigin not like in css

[daivt 0 Likes (Newbie)]

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

[Cassie 5,655 Likes (Superhero)]

Hey there, welcome to the forums! A codepen would be really helpful so we can see your code.

I would guess  you're either using transform box in your CSS, which isn't needed for GSAP, or you're not aware that CSS transforms 'stack' (i.e. the order you write them down provides different results) whereas GSAP is consistent with placement no matter the order. 

See the Pen jEryLV by aarongustafson (@aarongustafson) on CodePen

If you can add a little minimal demo we'll try to help out!

[daivt 0 Likes (Newbie)]

here is my code pen 

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

[Carl 11,325 Likes (Superhero)]

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

See the Pen BardxxK?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Feel free to tweak the numbers of course.

 

 

[daivt 0 Likes (Newbie)]

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

[Cassie 5,655 Likes (Superhero)]

Heya!

 

Also a little tip - I'm not sure what graphics editor you use - but I hugely recommend Affinity designer as you can save out SVG's with relative coordinates *and* flatten transforms on export.

So all those inline matrices are now gone. Nice clean SVG markup to start off with makes animating a breeze.

See the Pen YzaxbeW by GreenSock (@GreenSock) on CodePen

[daivt 0 Likes (Newbie)]

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

[Cassie 5,655 Likes (Superhero)]

Why have you posted this again @daivt? Are we missing your intention somehow?

[daivt 0 Likes (Newbie)]

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 :((

[Cassie 5,655 Likes (Superhero)]

No I'm not understanding. You want the same visual result but with the same origin and without removing inline transforms?

The reason it's different is because there are conflicts between your inline styles and GSAP, also because CSS and GSAP handle SVG transform origin differently. Not a bug - a feature. That's why you're not getting the same result with CSS.

The solution is either to remove the inline  transform:matrix() and transformOrigin's or to change the transformOrigin in GSAP. 

[Cassie 5,655 Likes (Superhero)]

SVG elements have two possible reference points for the transformOrigin, the SVG canvas, and the element itself.

See the Pen WNzZgwN by GreenSock (@GreenSock) on CodePen

GSAP uses the Element itself as the default whereas CSS uses the Canvas itself.

You can change this in CSS with transform-box, and with GSAP by using svgOrigin: '....'  instead of transformOrigin

Maybe this will help?

I'm a little confused about where to go from here though. Maybe you can explain a little more if you need help.