Moving an element to specific positions along a curved path

[Manitoba agency]

Hello,

 

I'm relatively new to GSAP.

I'm having difficulties with a specific animation.

 

I would like to move a "disc" to multiple specific positions along a curved path on a click event.

 

For example, a "disc" is initially set to a position along the path. I have multiple "p" elements, and if i click on one of them, i would like the "disc" to move to a specific position along the curve. Then if i click on another "p" element, the disc should move to another specific position along the curve (starting from the previous position).

 

And that's where i'm facing difficulties, i didn't find how i could get a specific position along a path and move an element to it.

 

Thanks.

See the Pen LYrKRwa by Onamor (@Onamor) on CodePen

[GreenSock]

I'm not sure where you're getting the data from about the positioning, but here's a quick fork showing how you could just add a data-progress attribute that has a value between 0 and 1 indicating the progress along the path: 

See the Pen XWYLZGw?editors=1010 by GreenSock (@GreenSock) on CodePen

 

We just create one tween along that motion path and then we tween the progress (the playhead) of that tween to whatever position we need that corresponds to the data-progress value. 

 

Does that help? 

[Manitoba agency]

Hello,

 

The "progress" parameter is what i was missing, i didn't search at the right place.

 

Thanks for the help, clear and simple.