Draggable Snap points

[gareth]

I am trying to create a mobile menu that can be swiped/dragged to close. I am pretty happy with it, but would like the menu to move back (stay open) if you do not drag past 50%. I thought this could be accomplished with snap points:

See the Pen ZYXVQm by eighthday (@eighthday) on CodePen

[Carl]

Hi Gareth, 

 

Thanks for the demo.

 

Pleas see if this works for you
http://codepen.io/GreenSock/pen/KwXJzO

 

I changed the snaps Array of values to a function that checks to see if the end value is less than 50% of the menu's width.

 

snap:function(end){
     //if less than halfway go back to fully open
   return (end < -menuWidth/2) ? -menuWidth : 0; 
  }

 

I think we may have to look into why your Array of points wasn't working. Seems ThrowProps was always preferring the "most negative" value as opposed to the closest value. [edit: wrong assumption, see below]

 

Carl.

[Carl]

The snapPoints do work. I think I was doing something wrong in my initial test. Please try

 

snapPoints = [-menuWidth, 0];
Draggable.create(menu, {type:"x",dragClickables:true, edgeResistance:1,throwResistance:0,maxDuration: 0.5, bounds:"#menuBounds", lockAxis:true, throwProps:true,snap:snapPoints,
});

 

http://codepen.io/GreenSock/pen/gbGqwj?editors=001

[gareth]

perfect! thank you. 

[gareth]

sorry, the first example is working great for me, the second does not spring back, even in your demo. 

[Carl]

Hm, strange that the second one is not working for you.

This is what I see in Chrome on a MAC

 

http://www.greensock.com/forums-support-files/throwProps-snap.mp4

 

Perhaps, give it another try with a clear cache?

 

Does anyone else have this pen here: http://codepen.io/GreenSock/pen/gbGqwj?editors=001performing differently than in my video?

The menu should snap back to its OPEN state if you drag or throw it LESS than 50% of the distance to its closed state.

[Jonathan]

I get the same behavior as in your MP4 video Carl.. but i tested on Windows 7 - PC, on latest Chrome 40.0.2214.94 m.

[gareth]

Very strange, I am also on a mac and Chrome, but it does not work like your video, even after a cache clear. 

[Jonathan]

What is the version of Chrome on Mac that you have?

 

Also did you try testing in Incognito mode/tab in Chrome to see if the result is different? .. sometimes extensions can skew performance and behavior in Chrome.

[gareth]

Version 40.0.2214.94 (64-bit) and yes tried incognito. baffling. 

[gareth]

Leaving aside the snap points, I am trying to do the same thing, but have the menu come in from the right. 

 

snap:function(end){
     //if less than halfway go back to fully open
   return (end > menuWidth*1.5) ? menuWidth*2 : 0;
    
  }

See the Pen gbGqBE by anon (@anon) on CodePen

 

edit. got it .

[Jonathan]

What version of Mac OS do you have?

[gareth]

yosemite

[Carl]

I updated Chrome and now I am having the same problem as Gareth with the snap points. Ugh.

Dragging close to 0, still snaps back to the far left (-menuWidth).

We will look into this further.

[Jonathan]

Looks like that last update was on Jan 30, 2015 to Version 40.0.2214.94

 

see:

 

http://googlechromereleases.blogspot.com/2015/01/stable-channel-update_30.html

http://googlechromereleases.blogspot.com/

 

Looks like other users are having other issues with this latest Chrome release.

[GreenSock]

It looks like the root of this problem had to do with some inconsistencies in the way Chrome reports bounds. More recent versions of Chrome seem to have shifted algorithms that can result in it being about 1 - 1.1 pixel off. So you could have resolved things by adjusting your snapping values accordingly:

snapPoints = [-menuWidth+1.1, 0];

However, I have updated Draggable to work around the issue internally so that shouldn't be necessary in the future. I have attached a preview of the upcoming release so that you can test it out. Please let us know if it works well for you.

GSAP_1.15.2_preview2.zip