Jump to content
GreenSock

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

Rotate with transformOrigin not like in css

Recommended Posts

image.thumb.png.845c213f18793655c39336a537067821.png

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

image.thumb.png.cd79c6c2438e0c433ed237ba86cb5933.png

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 :e2b617db9e054fe28d8fc31ba13d420a-m02-008

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.


image.png

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

  • 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.
×