Jump to content
GreenSock

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

TransformOrigin px vs %. Please guide me

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 post
Share on other sites
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 post
Share on other sites

@GreenSock The rotation works fine and am able to implement, although the tween restarts abruptly. Is there a way to continue the rotation indefinitely without that weird jump?

Here's how it looks:

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

 

Link to post
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 post
Share on other sites

@akapowl That's so cool! I am experimenting with your suggestion and added a .delay to evenly space the atoms. Check it out:

 

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

 

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

Link to post
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 post
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 post
Share on other sites

Or you could use a negative delay instead of a positive one.

  • Like 3
Link to post
Share on other sites
1 minute ago, ZachSaucier said:

Or you could use a negative delay instead of a positive one.

 

Oooh, that is neat. Learned something new today :D 

Link to post
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 post
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.

×