Jump to content
Search Community

SVG Globe Animation

polymedia test
Moderator Tag

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

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