Jump to content
Search Community

Progressing draggable to smoothly drag along the path

skala 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

On 23/05/2018 at 8:03 PM, OSUblake said:

If you look at those boxes, they go in order, and adjacent boxes will not overlap. So you can use that prevent unwanted movement. For example, if the user starts out dragging in the first box, we'll call that box #0, then you can limit dragging to that box and box #1 i.e. the next box on the curve. Once the user has dragged into box #1, then you would limit movement to box #0, #1, and #2. Once the user has dragged into box #2, then you would limit movement to box #1, #2, and #3. You would just continue that pattern until the end.





Normally I would make a demo, but I don't have a lot of time right now. If @Dipscom or @Sahil wants a challenge, feel free to help out. :-D



Hi guys,

Can anyone help me implement this approach?

Link to comment
Share on other sites

I thought you figured it out.


Here is fork of Blake's previous demo. Here I am calculating two lengths from where scan should start and end, it is being determined by how much your mouse has traveled. It works fine on curves and edges, except on sharp edges where angle is too small. Actually it works just fine if you set your goals realistically.


If you want more control then you might want to go through Blake's second demo.


Again to understand how everything works and how you can make changes as per your requirements, you will need to get through the fundamentals of how paths work and the code we have posted.


See the Pen oygXaj?editors=1010 by Sahil89 (@Sahil89) on CodePen

@OSUblake Do I get the trophy?

  • Like 4
  • Thanks 1
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...