Jump to content
GreenSock

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

SVG Globe Animation

Recommended Posts

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

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

 

  • Like 6
Link to comment
Share on other sites

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

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

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

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

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.


Screenshot 2021-09-07 at 10.28.50.png

 

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'})


 

  • Like 4
Link to comment
Share on other sites

 

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thanks for the great support to all of you! I will try the polyline solution, which looks great!

  • Like 3
Link to comment
Share on other sites

 

... more polylines:

 

See the Pen NWgdgvG by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 3
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.
×