Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sumimasenga

Draggable with snap, when throwing and click again, jumps to end position

Recommended Posts

Hello!

 

Has anyone noticed when using Draggable with throwProps:true, with restricted bounds AND with snap that if throwing the object and try to catch it before it reaches its destination it directly jumps to calculating end position. It should just freeze the object when the user click on it when it still in motion. Like when you are not using the snap.

 

Im creating a webapp with a navigation that I can throw :) Like the facebook app.

 

Try with the examples http://www.greensock.com/draggable/ the first one "Throw" with the setting  "Snap to grid" checked. You will see what happens. 

 

Any thoughts or solution?

 

Thanks

//Robert

Link to post
Share on other sites

Solved it! :)

I had to check to see if the object was moving and then return the current x position in the snap function.

 

Hope this helps people for creating the slickest slider menu for webapps :)


var preventSnap = false;
Draggable.create('#top_header',
{
trigger:'.hit',
type:'x',
edgeResistance:1,
throwProps:true,
bounds:'.container',
snap:
{
        x: function(endValue)
        {
        if(preventSnap)
        return this.x;
       
        if(endValue > this.maxX / 2)
        {
        $('#top_header .hit').data('isOpen', true);
        return this.maxX;
        }
        else
        {
        $('#top_header .hit').data('isOpen', false);
        return 0;
        }
        }
},
    onDragEnd:function() { preventSnap = true; },
    onDrag:function() { preventSnap = false; },
onClick:onClickHandler, //Here you call the function to open or close the menu with just a click.
onThrowComplete:function(){ preventSnap = false; }
});
  • Like 1
Link to post
Share on other sites

Hi Robert,

 

Glad you were able to solve your issue and thank you for posting your solution, it will be helpful for other users that might come across this scenario.

 

Best,

Rodrigo.

Link to post
Share on other sites

Yeah, thanks for offering your solution. I'll also implement a workaround internally for the next release. The reason this is happening is that when you click/touch to start dragging, it automatically applies the bounds in order to make sure things are starting from a "legal" spot. However, I think it'd make sense to suspend that behavior if the element is mid-tween. 

Link to post
Share on other sites

Here's a preview of the upcoming release - would you mind giving it a shot and letting us know if it works well for you? It should behave the way you were expecting now (clicking while the tween is in progress won't force the snap). 

GSAP_1.11.0_rc2.zip

Link to post
Share on other sites

Hello!

 

I tried the attached file and it works perfecto! :D  Im honored that I could help you guys with this great library to be even better! :) 

 

Keep up the awesome work you do and looking forward for the new release!

 

Cheers

//Robert

Link to post
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.

×