Jump to content


draggable boundary options

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



Just started to play around with the draggable plugin, very nice thank you! Just wondering how I control the collision with the boundary? i.e can I set how far the draggble is pushed back off it? 

Link to comment
Share on other sites

Have you tried changing the edgeResistance?


edgeResistance : Number - a number between 0 and 1 that controls the degree to which resistance is applied to the element as it goes outside the bounds (if any are applied), where 1 won't allow it to be dragged past the bounds at all, 0.75 applies a lot of resistance (making the object travel at quarter-speed beyond the border while dragging), and 0.5 would be half-speed beyond the border, etc.


Or are you referring to something else?

Link to comment
Share on other sites

yes, I have set my edgeResistance to 1, as I don't want my draggables to move past the boundary. What I would like is for the draggable to hit the boundary and bounce off it. 

Link to comment
Share on other sites

Ok, that is a little more clear, but are you talking about this bounce happening when using ThrowProps with Draggable? For instance do you want to drag and throw the object and have it naturally bounce back when it hits the edge?


If so, no, there isn't anything in the API that would allow you to easily adjust the amount of bounce back on edge collision. 


If I've misunderstood the question, feel free to elaborate.

Link to comment
Share on other sites

You have it right, here is my code:


Draggable.create(".dot", {type:"x,y", edgeResistance:1,resistance:0.2,bounds:$("#container"), throwProps:true,ease:Strong.easeOut,onDragStart:setCurr});

I guess I need to take out throwProps and build my own collision logic?

Link to comment
Share on other sites

Yep, you can use an onThrowUpdate if you want to call a function each time the position changes during the "throw" and then use whatever logic you want to do the bouncing. Also keep in mind that you can call ThrowPropsPlugin.getVelocity(yourElement, "x") or ThrowPropsPlugin.getVelocity(yourElement, "y") to figure out the velocity of those properties. Then you can reverse whichever one you want, and maybe even feed that new (negative) velocity into a throwProps tween. 


Have fun!

  • Like 2
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.