Jump to content
Search Community

Drag along an svg path

jollibee test
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

A complicated shape where you can drag along the x and y axis would probably require finding the closest point on a curve.



That's based on this SO answer.



Definitely not an easy task. For dragging along a single axis, this thread might be of help.



  • Like 5
Link to comment
Share on other sites

  • 2 years later...
On 1/10/2018 at 8:43 AM, OSUblake said:


Actually, this might be easier. I just modified the closestPoint function from this d3 demo.







Hi guys,

Thanks for this example.  I've used Blake's code but I need help animating the draggable to a starting position white controlling a timeline - this should all be triggered by scroll.  I hope this is not a big ask!


This is what I have so far -  I know it's a terrible hack - please help!

- I called an update() function from Blake's closestPoint() and sent the beforeLength as a variable.

- The update() function animates the progress timeline and draws the progress path.

(This works when dragging the handle)


Main Problem is how to animate the starting position when the section scrolls into view.


Here is my pen (I removed as much as possible from the original site, but it's still quite long. Sorry!):


See the Pen YzwrXwb?editors=1011 by sonya-ninja (@sonya-ninja) on CodePen

Link to comment
Share on other sites

33 minutes ago, ZachSaucier said:

Hey Sonya. Your approach seems fine to me. What is the issue?

Hey Zach!


It's not working.  Try scrolling.  It is supposed to smoothly animate to the starting position and animate the progress of the color change while doing so.  The drag part works but I didn't get the animate-to-starting-position to work.


The drag-handle tweens to the start (that's okay) and then I've put this ugly line in on the scrolltrigger timeline (right at the end of the js):

tl.call(closestPoint, [path, pathLength, { x: 143.0357, y: 492.263 }], ">");


That causes a jump to the tl progress - it's not a nice smooth update of the timeline progress when it scrolls into view.


I actually wanted to get the value for the beforeLength out of Blake's function and call the update function separately, but I don't know enough about js to figure out how to get that variable outside of Blake's closestPoint() function.


Thanks for replying!



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.
  • Create New...