Jump to content
Search Community

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

sumimasenga test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 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.
×
×
  • Create New...