Jump to content


Draggable snap array end value

Moderator Tag

Recommended Posts

Long time reader – first time poster. Love the forum and GSAP. I’m in awe of all the cool stuff being created by everyone.


This is probably quite simple, but I’m more of a designer than a Javascript guru. I’m learning though.



If I have a draggable with throwprops set to true and an array defining my snap points, how can I retrieve the array position number that the draggable snapped to onThrowComplete? I don’t need the  position of the draggable element, but rather  the position in the array that was used.


So, if my snap array were [100,200,300,400,500] and the draggable settles/snaps to  400, how do I retrieve the value of 3 from the snap array onThrowComplete?


Thank in advance.

Link to comment
Share on other sites

Hi PointC  :)


you can use methods like jQuery.inArray() or Array.prototype.indexOf() or a javascript loop like this :


var arr = [0,200,500,800,100]

function FindIndex(Array,elem){
  for ( var i=0;i<Array.length;i++) { if ( Array[ i ] === elem ) { return i; } } // return i
  return -1; // return -1 if it is not present

console.log( FindIndex(arr,500) )

btw you can get Draggable snap array in callback functions by this : this.vars.snap

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Glad to hear that you're enjoying GSAP and it's features.


One of the features of the snap function of the ThrowProps plugin is the endValue parameter being passed. This is basically the value the plugin calculates once the throw is completed and where the element would ultimately land (if no bounds are setted of course). It works basically like this:

Draggable.create("#yourID", {
   snap:function(endValue) {
     console.log( endValue );

Also keep in mind that the ThrowProps plugin will loop through the array of snap points you're passing and the element will land in the closest one to the array. From the docs:

  • snap : Function | Object | Array - allows you to define rules for where the element can land after it gets released. For example, maybe you want the rotation to always end at a 90-degree increment or you want the x and y values to be exactly on a grid (whichever cell is closest to the natural landing spot) or maybe you want it to land on a very specific value. You can define the snap in any of the following ways:
    • as an array - if you use an array of values, ThrowPropsPlugin will first plot the natural landing position and then loop through the array and find the closest number (as long as it's not outside any bounds you defined). For example, to have it choose the closest number from 10, 50, 200, and 450, you'd do snap:[10,50,200,450]

Here's a great sample created by Jamie some time ago, basically does that but instead of going to the closest landing point of the array advances one at a time:


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



  • Like 1
Link to comment
Share on other sites

Thanks very much! I knew it would be simple. indexOf() was all I needed.

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.