Jump to content
Search Community

TransformOrigin px vs %. Please guide me

habhab. test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

 

In my codepen I have used % and px. Both are behaving differently obviously, but how can I use transformOrigin to make an element rotate(orbit) around a center pivot?

 

I've seen the same question asked on here, but the answers were using tweenMax? In the documents it says tweenMax was deprecatedhttps://greensock.com/tweenmax/ ) and included in the core with gsap 3. How can I approach this type of rotational orbit?

 

 

 

See the Pen VwmYyjz by habsqrd (@habsqrd) on CodePen

Link to comment
Share on other sites

  • Solution
8 hours ago, habhab. said:

how can I use transformOrigin to make an element rotate(orbit) around a center pivot?

Is your goal to have everything rotate around the center of the SVG? If so, svgOrigin is probably the easiest way to do it. 

See the Pen b9a523861af8c67036640810240c64fb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

transformOrigin is always in relation to the element itself (not the SVG canvas), so "50% 50%" would be the middle of the element itself. And px-based values would be measured from the top left corner of the element itself. 

 

Does that help at all? 

  • Like 5
Link to comment
Share on other sites

 

Hey @habhab.

 

If you want to loop something infinitely, you would want to use repeat: -1.

 

To get rid of that jump, you'd want to make sure it doesn't repeat from the start, so you'd probably want to increase the rotation with each repeat by using "+=" instead of tweening to a certain rotation and use repeatRefresh: true to make sure it starts from where it ended.

 

Then again, with how you pass the rotation, I figured it would change the amount of increase in rotation for an individual atom every other repeat

 

See the Pen 1eef1c11a51f5aaef7f2f2e64b7f867a by akapowl (@akapowl) on CodePen

 

So I figured to keep the amount of rotation constant for each individual atom it would be best to loop over the atoms and set a variable for the rotation of each atom (with help of GSAP's utils.random() and use that for the tween of each atom instead.

 

See the Pen 69a6ea74136011721a4820831862ead1 by akapowl (@akapowl) on CodePen

 

 

I am not sure if this is the most handy way to do it, but it works quite well.

 

 

  • Like 5
Link to comment
Share on other sites

1 hour ago, habhab. said:

Is there a better way to start them all at the same time after the delay has been applied?

Sorry, I don't understand your question. What do you mean start them at the same time? If they have a different delay then by definition their start points are different. Are you saying that you want them to have the same offset that your demo shows but start them all at the same time?

  • Like 1
Link to comment
Share on other sites

1 hour ago, habhab. said:

Is there a better way to start them all at the same time after the delay has been applied?

3 minutes ago, ZachSaucier said:

Sorry, I don't understand your question.

 

Same goes for me.

 

If you want them to start at different points but all at the same time, you would probably want to set a specific rotation initially from where they should start.

 

Something like this

 

See the Pen 7b2f9a8a3eef659d9c3b124e5827f8f2 by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

34 minutes ago, ZachSaucier said:

Sorry, I don't understand your question. What do you mean start them at the same time? If they have a different delay then by definition their start points are different. Are you saying that you want them to have the same offset that your demo shows but start them all at the same time?

@ZachSaucier Sorry, I'm still figuring out how to ask the right questions and offset was the term that I needed. That negative delay works perfect.

 

@akapowl Setting the offset in an if-statement just opened a new door for me.  I will continue to experiment🤗

 

 

Thank you!

 

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