Draggable snap array end value

[PointC 8,599 Likes (Superhero)]

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.

[Diaco 1,948 Likes (Superhero)]

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

[Rodrigo 2,662 Likes (Superhero)]

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", {
   type:"rotation",
   throwProps:true,
   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

 

Rodrigo.

[PointC 8,599 Likes (Superhero)]

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