Jump to content
GreenSock

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

Drag along an svg path

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

very cool, Blake!

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

×