Jump to content
Search Community

Animate along SVG path on click

Daan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I'm quite new to GSAP and still learning the ropes. 

 

I am trying to create a specific animation that has proven difficult and was hoping someone could give me some pointers or advice on how to best tackle this.

 

Using the MorphSVGPlugin I have placed several dots on a path and made them loop on it. What I would like to be able to do with this is when clicking a dot, to have this dot move to the bottom center of the path. In other words, the dots should loop forward or backward (based on the shortest distance) until the clicked dot is in the right location.

 

So far I have not been able to figure out a way to make this work. Any help or advice would be much appreciated!

 

Thanks.

See the Pen yzpyNM by dvdb (@dvdb) on CodePen

Link to comment
Share on other sites

Hello @Daan

 

Welcome to the forums!

 

Very nice question! I never get those ideas, thank you. And thanks for the sample pen.

 

You say you're new and learning the ropes, yah?

 

Well, how does it feel to have a concentrated dose of intense refactoring of your code? Have a look at my fork of your pen. I'm sorry but I did butcher your work a bit...

 

See the Pen qPpbJw?editors=1011 by dipscom (@dipscom) on CodePen

 

 

Let me know if you have any issues understanding what's going on or why.

 

Happy tweening!

  • Like 4
  • Haha 1
Link to comment
Share on other sites

 

@Dipscom your training is complete. No longer shall ye wipe your weeping eyes on the hem of my cape.

Go forth animating all of the things and share thine vast wisdom!

 

@Daan Welcome to the GreenSock forums, 

Glad to hear you are enjoying GSAP. Just to elaborate a little on Dipsom's solution above. The magic that happens on click is that he is tweening the progress of each circle's animation. Just like you can tween the position of an element, you can tween the progress and duration of tweens and timelines which allows you to do some pretty cool things. Here is a demo:

 

See the Pen YwOWmQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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

33 minutes ago, Carl said:

 

@Dipscom your training is complete. No longer shall ye wipe your weeping eyes on the hem of my cape.

Go forth animating all of the things and share thine vast wisdom!

 

I am not worthy. :(

 

One day.

 

But, senpai, I feel ready for Monster Truck! Will you lead me?

  • Haha 2
Link to comment
Share on other sites

Thanks for the warm welcome guys!

 

@Carl

This definitely more than enough to help me continue my idea and keep experimenting.

And sometimes something needs to be destroyed to make way for better things ;-)

 

@Dipscom

Thanks for that, the additional info is quite helpful!

 

The help is much appreciated. Cheers!

  • Like 2
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...