Jump to content
Search Community

I don't understand TransformOrigin

jimmylet test
Moderator Tag

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

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