Jump to content


Move text with collision detection

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

Hi guys!

I've been trying to figure out how to do a text that interacts with a object. With the text being push away from an object when it's near the object.

I tried using on several physics library and it seems most of them are overkill and hard to control. (For example, its hard to bind the text back to its original position as the collision library either makes it a static or a dynamic [reacting to gravity]. )

Currently, there is what is on my head. Correct me if i'm wrong.

I probably need to make use requestAnimationFrame to constantly detect the collision. As the collision object will probably be a constantly changing object.


I can't seems to wrap my head around on how to create a Tween function that pushes a characters (near colliding object) out and then back when its not near the colliding object.


Any help is appreciated :)

Link to comment
Share on other sites

If your objects aren't rotated, Axis-Aligned Bounding Box (AABB) Collision Detection is really fast, and dead simple. All it does is check to see if two rectangles are overlapping. This is the same form of collision detection used in Draggable's hitTest method.


var rect1 = element1.getBoundingClientRect();
var rect2 = element2.getBoundingClientRect();

if (intersects(rect1, rect2)) {
  // collision detected

function intersects(a, b) {
  return !(b.left > a.right || b.right < a.left || b.top > a.bottom || b.bottom < a.top);




How you implement and optimize collision detection is going to depend on what you're doing. For example, what happens on impact? Does it stop, bounce, do you make any adjustments for the overlap, etc?  And how many objects are being animated? I used the onUpdate callback in that demo, but if I had more then 1 object that is constantly being animated, I'd probably do all the collision detection using the ticker, which uses requestAnimationFrame.


If you need more help, please provide a demo. It's really hard to advise without seeing what you're trying to do.


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