Jump to content
GreenSock

gareth

Draggable Snap points

Recommended Posts

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

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.

Link to comment
Share on other sites

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,
});
 
  • Like 1
Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

What version of Mac OS do you have?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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

  • Like 1
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.
×