Jump to content


Dragable arrow on curved line

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

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.

Screen Shot 2017-11-20 at 3.45.37 PM.png

Link to comment
Share on other sites

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 ...





  • Like 3
Link to comment
Share on other sites

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


  • Like 1
Link to comment
Share on other sites

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





  • Like 5
  • Thanks 1
Link to comment
Share on other sites



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.

  • Like 2
Link to comment
Share on other sites

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



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