How to have this svg path follow a circle?

[DavidPicarazzi]

Hello! I am new to GSAP and am wondering what the best method would be to have the blue line follow the circle in my animation. You can checkout the animation here . I also wanted to know if theres a shorthand way to code what I have here:

tl.to("#blob-1.animate", {duration: 0.5, x: -113, ease: "power1"});

tl.to("#blob-1.animate", {duration: 0.5, y: 150, ease: "power1"});

tl.to("#blob-1.animate", {duration: 0.5, x: 0, ease: "power1"});

tl.to("#blob-1.animate", {duration: 0.5, x: 65, y: 80, ease: "power1"});

 

See the Pen VwYgNRK by DavidPicarazzi (@DavidPicarazzi) on CodePen

[GreenSock]

Welcome to the forums, @DavidPicarazzi! I have a few questions for you:

1. Do you just want that circle to move along the <path> and have the stroke revealed accordingly, all in one fell swoop? Or do you need to be able to go from one anchor to the next anchor on the path, with very specific durations/eases (and be able to stop at a certain anchor)? 
2. Right now, you're plotting each coordinate out and having a separate tween for each, and there's an ease between each of them (not smooth) - is that how you want it to look? Since each segment is a different length but you're using duration: 0.5 for them all, it means the velocity won't be consistent. Is that okay? 
3. Have you seen the new MotionPathPlugin? 

[DavidPicarazzi]

Hi Jack! Yes I'd like it all in one shot. As I am new to GSAP I'm pretty sure I went about the animation wrong. Ideally I'd want it all in one shot verses having separate tweens. Is there a way to go about this? And yes I'd like to have the stroke pretty much follow the circle in sync but i'd want the stroke to draw itself out like you can see here if you scroll down abit. I have not checked out the MotionPathPlugin.

[ZachSaucier]

Hey David.

 

This is quite simple with our MotionPathPlugin and DrawSVGPlugins! Take a look:

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

 

DrawSVG is one of our incredibly helpful Club GreenSock plugins. I recommend taking a look at the others as well. They can add some really cool and useful functionality to your web pages  

[DavidPicarazzi]

Hey Zach! So i see that DrawSVG is a plugin which you have to pay for by purchasing the simplygreen package. Am I able to pay for SimplyGreen one time so I can have DrawSVG rather than pay the annual fee?

[GreenSock]

1 hour ago, DavidPicarazzi said:

Hey Zach! So i see that DrawSVG is a plugin which you have to pay for by purchasing the simplygreen package. Am I able to pay for SimplyGreen one time rather than pay the annual fee?

Oh sure, you're not locked into paying forever - you can let your membership expire after a year if you don't see the value in renewing. Of course we aim to keep delivering value to our users so that it's a no-brainer for them to keep renewing. Totally up to you, though.

 

There are 3 reasons anyone joins Club GreenSock: 

1. To get the bonus (members-only) plugins
2. To get the commercial license that comes with "Business Green" memberships which gives you permission to charge multiple end users for whatever site/product/app you use GSAP in. See https://greensock.com/licensing andThe commercial license is tied to your membership, so you should keep it active as long as you're continuing to charge multiple end users.
   
   Our entire business model is based on the honor system - we don't put "phone home" scripts in our code that'd cause it to suddenly stop working upon expiration. We trust that if we extend respect to our end users, it'll be reciprocated. That's also why we provide the raw source code for all our tools - you can check it to see that there's nothing that reports usage or anything remotely like that. 
3. To support our ongoing development efforts. We've been doing this for 12 years now and have no plans to stop. Without Club GreenSock members, that'd simply be impossible. 

Does that answer your question? 

 

If/When you're ready, you can sign up at https://greensock.com/club/. Let us know if you have any other questions or concerns. 

 

Happy tweening!

[DavidPicarazzi]

So If i buy the basic membership, I can get a downloadable version of DrawSVG and just keep that forever and let my membership expire?

[GreenSock]

3 hours ago, DavidPicarazzi said:

So If i buy the basic membership, I can get a downloadable version of DrawSVG and just keep that forever and let my membership expire?

Absolutely, as long as you aren't using it in a way that requires the special commercial license. That's the only reason you'd need to renew. But again, our whole business relies on the honor system so we trust you to do the right thing in that regard - there's no code in the tools that'd make it suddenly stop working after a year. And the vast majority of use cases don't require the special commercial license anyway. 

 

If you haven't read https://greensock.com/why-license, I'd definitely recommend giving it a glance at least

 

Does that clear things up? 

[DavidPicarazzi]

Thank you Zach! That definitely clears up a lot. GSAP is capable of a lot I see so I will definitely take a look. I guess my last question is - once I purchase basic and am able to use DrawSVG, am I able to use it import it as a CDN instead of downloading to save bandwidth?

[GreenSock]

1 hour ago, DavidPicarazzi said:

Thank you Zach! That definitely clears up a lot. GSAP is capable of a lot I see so I will definitely take a look. I guess my last question is - once I purchase basic and am able to use DrawSVG, am I able to use it import it as a CDN instead of downloading to save bandwidth?

No, sorry, we can't put the members-only files on a CDN, otherwise they'd be super easy for everyone to steal and use without any membership. See what I mean? But they're relatively small so it shouldn't cause a problem. You just put the file(s) on your server along with your other files, or if you use a build tool/bundler you can NPM install them via a special package we provide in the download. 

 

Let us know if you have any other questions. Cheers!