Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jollibee

Drag along an svg path

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

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

Link to comment
Share on other sites

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.

 

 

  • Like 5
Link to comment
Share on other sites

I will take a look at the links.

 

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

Link to comment
Share on other sites

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

 

 

  • Like 6
Link to comment
Share on other sites

very cool, Blake!

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

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

Link to comment
Share on other sites

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?

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!

 

S

Link to comment
Share on other sites

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!

 

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