Jump to content


Draggable Snap Question

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

Hey guys,


I had two quick questions about snapping with Draggable.


Let's say I have an array: [0, 100, 200, 350, 500];


1. Is there a way to force Draggable (w/ throwProps) to only snap *one* array value from the original value?


Meaning if my object is at 200, no matter how hard i flick it, it will only snap to 100 or 350? Not 0 or 500.


2. Also, Is there a way to honor the direction the object is traveling and snap up or down in array based on the direction even if the velocity would not of actually carried the object closer to the next array value? I don't want the object to ever snap back to its original drag position, rather I want the object to go forward or backward in the snap array.



Link to comment
Share on other sites

Definitely, you just need the correct conditional logic in the snap function.


Jamie created a great sample about it some time ago:


See the Pen FnKba by jamiejefferson (@jamiejefferson) on CodePen


As you can see the key is in the snap function and the great thing is that it doesn't allows to advance to the next snap point unless the throw is completed, but if you want to aloow that particular behaviour you could remove the boolean from the code.


Actually Jamie was helping me with a throwProps powered slider another user asked about:


See the Pen pzIgJ by rhernando (@rhernando) on CodePen



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