polymedia Posted August 30, 2021 Share Posted August 30, 2021 Hi, I would like to animate the "arms" on the globe. Something like in this pen, so that they move constantly: See the Pen PyGqwa by aado29 (@aado29) on CodePen For this I have created a SVG, but im not quite sure how to achieve this animation with GSAP. Any help would be greatly appreciated Best regards Andi See the Pen WNOrxjg by polymedia (@polymedia) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted August 30, 2021 Share Posted August 30, 2021 Hey @polymedia, Welcome to the GreenSock Forum. This should give you some pointers. See the Pen vYgGqLB by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 6 Link to comment Share on other sites More sharing options...
polymedia Posted August 31, 2021 Author Share Posted August 31, 2021 23 hours ago, mikel said: Hey @polymedia, Welcome to the GreenSock Forum. This should give you some pointers. Happy tweening ... Mikel Thank you Mikel for your fast reply! Link to comment Share on other sites More sharing options...
polymedia Posted September 5, 2021 Author Share Posted September 5, 2021 Is it possible to calculate the SVG positions in the onUpdate function so that all the path move synchronously? Link to comment Share on other sites More sharing options...
Cassie Posted September 5, 2021 Share Posted September 5, 2021 Hey polymedia! Sure, any logic you like is possible in a callback - I'm not sure this sounds like the best approach though. What is it you mean by 'synchronously' and what have you tried so far? Link to comment Share on other sites More sharing options...
polymedia Posted September 7, 2021 Author Share Posted September 7, 2021 Hey Cassie, thanks for your reply! I added some lines (the red ones) which are not moving like the rest. It seems to be off because of the duration and delay. I want them to move in a fluid motion like in the example pen. I tried to calculate the position in the callback, but that was pretty performance heavy. Is there a simple way to do it, which im not seeing :)? Thanks for the help! Regards Andi Link to comment Share on other sites More sharing options...
Cassie Posted September 7, 2021 Share Posted September 7, 2021 It's not off because of the duration and delay. The logic only works when the lines and dots match up For example - The red lines connecting two white dots would be moving at both ends so they would need both of the x and y coordinates updated. Whereas some others don't. There's also more lines than dots now. The current loop will no longer work because the consistent pattern is no longer there. In order to get this working you'll likely need to do a little bit of manual grouping - work out which parts need to move in unison and animate them together. I'm sure there's a more programmatic route here but it's probably going to overcomplicate things. e.g. (pseudocode) let anim1 = gsap.timeline({ repeat:-1, yoyo:true, }) .to(dot[4], {cx:'+=10'}) .to(lines[2], {x1:'+=10'}) .to(lines[4], {x1:'+=10'}) let anim2 = gsap.timeline({ repeat:-1, yoyo:true, }) .to(dot[3], {cy:'+=10'}) .to(lines[1], {y1:'+=10'}) .to(lines[2], {y1:'+=10'}) 4 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 7, 2021 Share Posted September 7, 2021 @polymedia If you need to move the lines synchronously with the circle position, you can do something like this: See the Pen e93cef6b2e0ca6a6169b15f08129d21b by nicofonseca (@nicofonseca) on CodePen Also, you can check the quickSetter method to improve the performance 🙂 6 Link to comment Share on other sites More sharing options...
mikel Posted September 7, 2021 Share Posted September 7, 2021 ... and another concept. Additional connecting lines could be set separately in relation to this polyline. See the Pen jOwybLM by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 1 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 7, 2021 Share Posted September 7, 2021 @mikel I really like this ! 💯 1 Link to comment Share on other sites More sharing options...
polymedia Posted September 8, 2021 Author Share Posted September 8, 2021 Thanks for the great support to all of you! I will try the polyline solution, which looks great! 3 Link to comment Share on other sites More sharing options...
mikel Posted September 9, 2021 Share Posted September 9, 2021 ... more polylines: See the Pen NWgdgvG by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 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