habhab. Posted January 31, 2021 Share Posted January 31, 2021 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 deprecated ( https://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 More sharing options...
Solution GreenSock Posted February 1, 2021 Solution Share Posted February 1, 2021 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? 5 Link to comment Share on other sites More sharing options...
habhab. Posted February 1, 2021 Author Share Posted February 1, 2021 Yes, thank you sir @GreenSock Link to comment Share on other sites More sharing options...
habhab. Posted February 1, 2021 Author Share Posted February 1, 2021 @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: Link to comment Share on other sites More sharing options...
akapowl Posted February 1, 2021 Share Posted February 1, 2021 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. 5 Link to comment Share on other sites More sharing options...
habhab. Posted February 2, 2021 Author Share Posted February 2, 2021 @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 comment Share on other sites More sharing options...
ZachSaucier Posted February 2, 2021 Share Posted February 2, 2021 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? 1 Link to comment Share on other sites More sharing options...
akapowl Posted February 2, 2021 Share Posted February 2, 2021 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 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 2, 2021 Share Posted February 2, 2021 Or you could use a negative delay instead of a positive one. 3 Link to comment Share on other sites More sharing options...
akapowl Posted February 2, 2021 Share Posted February 2, 2021 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 Link to comment Share on other sites More sharing options...
habhab. Posted February 2, 2021 Author Share Posted February 2, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now