Drag along an svg path

[jollibee]

The circle move along the path with animation in this example.

 

But how to do that with draggable plugin,  drag the circle along the path.

See the Pen xpYbgg by jollibee (@jollibee) on CodePen.

[OSUblake]

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

http://phrogz.net/svg/closest-point-on-bezier.html

 

That's based on this SO answer.

https://stackoverflow.com/a/44993719/2760155

 

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

 

 

[jollibee]

I will take a look at the links.

 

Also, I'm think about split the path into multi line for complicated shape.

[OSUblake]

5 hours ago, jollibee said:

Also, I'm think about split the path into multi line for complicated shape.

 

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

https://bl.ocks.org/mbostock/8027637

 

 

See the Pen YYemRa by osublake (@osublake) on CodePen.

 

 

[Carl]

very cool, Blake!

[jollibee]

On 1/10/2018 at 2:43 PM, OSUblake said:

 

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

https://bl.ocks.org/mbostock/8027637

 

 

See the Pen YYemRa by osublake (@osublake) on CodePen.

 

 

 

 

Great job. I will start from this demo.

[Sonya.Ninja]

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.

https://bl.ocks.org/mbostock/8027637

 

 

 

 

 

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.

[ZachSaucier]

18 hours ago, Sonya.Ninja said:

I know it's a terrible hack - please help!

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

[Sonya.Ninja]

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!

 

S

[ZachSaucier]

Hey @Sonya.Ninja. I don't really understand your approach. I'd do something more like this:

See the Pen zYrEWZV?editors=0010 by GreenSock (@GreenSock) on CodePen.

[Sonya.Ninja]

28 minutes ago, ZachSaucier said:

Hey @Sonya.Ninja. I don't really understand your approach. I'd do something more like this:

 

 

That is perfect!

 

Thanks so much!