Animating objects/dots along a line

[DeltaFrog]

Hi everybody,  

 

I'm have a project coming up that requires a few moving dotted lines.   The example mp4 below was created in After Effects. How can I recreate this in GSAP?   I see the Motion Path Plugin is the way to do this so I have started this pen but I'm getting an error "gsap is not defined" and not sure what to do next.   Can anyone help me get this dot moving along the line?    Thank you!  

 

 

 

See the Pen JjMKXxR by chriscalabrese (@chriscalabrese) on CodePen

[DeltaFrog]

Yay, I got it working using the code pen yall already provide.     How can I display multiple dots moving together in a row like the video? 

Current working Pen:    

[Cassie]

Heya!

 

You have a typo.

 

import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

 

That being said, you need to animate the stroke of the path - not dots along the path

 

Something like this

See the Pen MWrejzG by cassie-codes (@cassie-codes) on CodePen

 

Hope this helps!

[Cassie]

Also, thanks for being a Club GreenSock member 🥳 We appreciate the support

[DeltaFrog]

12 minutes ago, Cassie said:

Heya!

 

You have a typo.

 

import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

 

That being said, you need to animate the stroke of the path - not dots along the path

 

Something like this
 

 

 

Hope this helps!

Amazing!   I'll dive in and let you guys know if I have more questions.   Greatly appreciated!  

[PointC]

Yeah, like @Cassie mentioned, animating the strokeDashOffset is what you need here. Mask a gradient with your stroked path and you'll be good to go.

See the Pen KKZMgxy by PointC (@PointC) on CodePen

 

That being said, if you do need a bunch of clones following a path, here are a couple ways to do it.

See the Pen ExVzqdm by PointC (@PointC) on CodePen

See the Pen pojmBKJ by PointC (@PointC) on CodePen

 

I also have a tutorial about dashed path animations here:

https://www.motiontricks.com/svg-dashed-line-animation/

 

Happy tweening.

 

 

[DeltaFrog]

2 hours ago, PointC said:

Yeah, like @Cassie mentioned, animating the strokeDashOffset is what you need here. Mask a gradient with your stroked path and you'll be good to go.

 

 

 

That being said, if you do need a bunch of clones following a path, here are a couple ways to do it.

 

 

 

 

 

I also have a tutorial about dashed path animations here:

https://www.motiontricks.com/svg-dashed-line-animation/

 

Happy tweening.

 

AMAZING!!! Thanks everybody.  Amazing support. 

 

[DeltaFrog]

AMAZING!!! Thanks everybody.  Amazing support.