Jump to content
GreenSock

jimmylet

I don't understand TransformOrigin

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

Before I begin, I apologize for my English. I come from Belgium and I speak French.

 

I try to use GSAP for the first time. But I do not understand the principle of transformOrigin I read the documentation but I still do not understand.

 

I try to put the transformOrigin the middle of the needle so that it simply turns.
 
In the end, I would like the rotation is done like this : http://d.pr/v/bGlK

 

Can you show me how you do and if you have tips? This will help me a lot for the rest of my learning.

 

 

Here is my code on Codepen : 

 

 

Thank you very much !

 

 

See the Pen oYvLXN by jimmylet (@jimmylet) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums. 

 

Thank you for the demo.

 

I think you understand that the transformOrigin allows you to provide the x/y coordinates for the point the object will rotate around.

With SVG you need to get those coordinates based on its native size. Your SVG has a viewBox of 0 0 58 58 but it is being scaled up to fill a container of 300x300.

 

To get the SVG to display at its native (normal) size I changed your container's css to 58x58:

 

.svgContainer{
  width: 58px;
  height: 58px;
}

I then selected the needle in Chrome Dev tools to see its bounding box.

I took a screenshot of the svg at its normal size with the needle highlighted so that I could see its true dimensions.

I then opened that screenshot in photoshop

 

44ece73307ad499c9d2a3f1ca358fd43.png

 
 
I measured to where the center of the needle is and got the values from width:4px height: 12px for the transformOrigin
 
tl.to(needle, 5, {rotation: 360, transformOrigin:"4px 12px"});
 
 
SVG ORIGIN 
GSAP also has a feature called svgOrigin which allows you to find a point on the SVG container that child elements can spin around.
This demo: http://codepen.io/GreenSock/pen/waKrNj illustrates the difference between transformOrigin and svgOrigin.
 
Since your svg is normally 58 x 58 the center will be at x:29, y:29. I think your needle may be off just a touch I found that 29 / 28 worked fine as svgOrigin
tl.to(needle, 5, {rotation: 360, svgOrigin:"29px 28px"});
 
Hopefully this helps. Let us know if you have any more questions.
  • Like 4
  • Thanks 2
Link to comment
Share on other sites

Waw ! Thanks for this response ! 

 

It is very complete and I realized all my mistakes. Thank you for the time you give me!
 
See you soon,
 
Jimmy
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.
×