Dragable arrow on curved line

[noob_jimi 7 Likes (Newbie)]

Hi there,

This is my time with GSAP and I'm very exiting to learn this.

 

I Want to create and slider navigation on some what curved line as shown in attached image.

 

User can move the arrow downwords, (moving along the path), and based on how much it is  moved i need to change the content of the slide.

 

Can you please help me to achieve this.

 

What i Thought was having a those green dots as svg path and arrow as image, and then use draggable plugin to move it along the path. But I'm not able to convert this logic into code.

 

Let me know if that login is correct and how can  i code it using gsap.

[mikel 4,782 Likes (Superhero)]

Hi @Jimish Soni,

 

Welcome to GreenSock Forums.

 

This example of famous @Diaco might help to track you in a good direction:

 

See the Pen aOzeNR by MAW (@MAW) on CodePen

 

Happy dragging ...

 

Mikel

 

 

[noob_jimi 7 Likes (Newbie)]

@mikel

 

Thank you. I just found these two examples an hour ago.
 

See the Pen zGZRqY by MAW (@MAW) on CodePen

 

See the Pen aOzeNR by MAW (@MAW) on CodePen

 

 

Thank you again for your help.

 

 

[noob_jimi 7 Likes (Newbie)]

@mikel

 

Hi Mikel,

 

I was trying with those solution, but my circle is not moving with my svg path.

can you please let me know what i'm doing wrong.

 

My SVG path is different than the example. is it because of that?

 

https://jsfiddle.net/jimishsoni1990/jc44re7x/

[mikel 4,782 Likes (Superhero)]

Hi @Jimish Soni,

 

The "rail" should be a concrete separate path.

Plus: the code needs to be changed from width to height (?).

 

Maybe, another expert gives help.
 

Kind regards

Mikel

[OSUblake 18,534 Likes (Superhero)]

Here you go. I added some extra visuals so you can see what's going on. The proxy (in red) is what Draggable is actually working with. The handle is controlled by a paused tween that makes use of the BezierPlugin. A progress value on every drag/throw update is calculated based on the position of the proxy element, which is then feed into the paused tween.

 

See the Pen eeVEpj by osublake (@osublake) on CodePen

 

And a version of that without the extra visuals.

 

See the Pen qVxXGb by osublake (@osublake) on CodePen

 

 

 

 

[noob_jimi 7 Likes (Newbie)]

@OSUblake

 

Thank you so much for this amazing solution.

 

But I'm still confuse with two things:

 

- Here is my jsFiddle: https://jsfiddle.net/jimishsoni1990/jc44re7x/6/

 

1. I updated your #path with my SVG path. Why arror doesn't follow the line. looks like it gets proposal to the line. I want to keep the head of an arrow towards the next green drop in a line. so that it gives like effect of arrow scrolling on the that green dotted line.

 

2. When I refresh the page arrows is at right position, but when i scroll it down and go back up, it changed it position and gives a weird effect.

 

Again thank you for support. Let me know if you need any other detail from my end.

[OSUblake 18,534 Likes (Superhero)]

Hi @Jimish Soni

 

Don't draw your arrow rotated. Have it pointing to the right, at 3 o'clock.

 

I made another version, using a triangle instead of a circle to help you visualize it better.

 

See the Pen NwYvaj by osublake (@osublake) on CodePen