Jump to content


Stop draggable elements overlapping

Go to solution Solved by Carl,

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

Hey everyone. 


First time writing on here. 


I have this pen 


I'm trying to add multiple elements to a bounds using draggable and throwprops. 


The problem i'm having is that I don't want these elements to overlap, in fact I want them to bounce off each other when they hit, so that a certain amount of elements would fill up the containing bounds. 


Any information on this would be greatly appreciated. Been hunting around for a while on this. 



See the Pen YWjzkP by mattl (@mattl) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,


Draggable has a hitTest() method which allows you to detect overlap of bounding boxes (works great on rectangular elements).



It sounds like you are looking for something more like a full-fledged physics engine like Box2D http://box2d-js.sourceforge.net/index2.html


GSAP doesn't support what you are asking "out of the box" so you would have to write your own collision detection logic.

Blake provides some great demos in this post on irregular collision: http://greensock.com/forums/topic/14235-about-irregular-collision-javascript/

  • Like 3
Link to comment
Share on other sites

Thanks for the reply Carl!

Link to comment
Share on other sites

Bouncing off walls is easy. Just multiply the current velocity by a negative number between 0 and 1. 

See the Pen ?editors=0010 by osublake (@osublake) on CodePen


Circle collision detection is really easy too!

See the Pen YXpdYN?editors=0010 by osublake (@osublake) on CodePen


However, combining both of those techniques to do something like billiard ball physics is not easy. Check out the source code in this example. You would have to run that code on every single frame.


  • Like 4
Link to comment
Share on other sites

Thanks for the additional info Blake. Looks like this may be a little out of my scope for right now. 

Link to comment
Share on other sites

Yeah, that's a tough one to animate using tweens because they kind of need to be updated as a batch. Otherwise it might cause an infinite chain of collisions bouncing back and forth. Your balls will get stuck together and start humping each other. Not a pretty site.


You could kill one of the tweens. It doesn't look as good, and they still could get stuck together if you throw too hard. 

See the Pen 43d98155bbb629b78f416a4b3c9efe9f?editors=0010 by osublake (@osublake) on CodePen


You can set the end value for a throw tween. Maybe you could predetermine some of this stuff. I made a fairly simple grid that could probably be used to do something similar.

See the Pen NrRJwm by osublake (@osublake) on CodePen

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