Share Posted February 4, 2015 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 Link to comment Share on other sites More sharing options...
Share Posted February 4, 2015 Hi Gareth, Thanks for the demo. Pleas see if this works for youhttp://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. Link to comment Share on other sites More sharing options...
Share Posted February 4, 2015 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 4, 2015 perfect! thank you. Link to comment Share on other sites More sharing options...
Author Share Posted February 4, 2015 sorry, the first example is working great for me, the second does not spring back, even in your demo. Link to comment Share on other sites More sharing options...
Share Posted February 4, 2015 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. 1 Link to comment Share on other sites More sharing options...
Share Posted February 4, 2015 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 4, 2015 Very strange, I am also on a mac and Chrome, but it does not work like your video, even after a cache clear. Link to comment Share on other sites More sharing options...
Share Posted February 4, 2015 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. 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 4, 2015 Version 40.0.2214.94 (64-bit) and yes tried incognito. baffling. Link to comment Share on other sites More sharing options...
Author Share Posted February 4, 2015 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 . Link to comment Share on other sites More sharing options...
Share Posted February 4, 2015 What version of Mac OS do you have? Link to comment Share on other sites More sharing options...
Author Share Posted February 4, 2015 yosemite Link to comment Share on other sites More sharing options...
Share Posted February 4, 2015 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. 1 Link to comment Share on other sites More sharing options...
Share Posted February 4, 2015 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. 1 Link to comment Share on other sites More sharing options...
Share Posted February 15, 2015 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now