Jump to content


Help Wanted

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


Help Wanted

The project has several objects

1 animated and some static

Tell me how to get the value box1.x  -  box1.left  or directly from GSAP during animation, and not through Jguery as now.



Is it possible to calculate with the help of GSAP intersection objects?

For earlier thanks for your attention


See the Pen EZepQG by Alex755 (@Alex755) on CodePen

Link to comment
Share on other sites

Hello Xsander775, and welcome to the GreenSock Forum!


I believe this example will help you see how to use GSAP Draggable hitTest() method to do collision detection.


See the Pen ZOayGO by GreenSock (@GreenSock) on CodePen


Draggable hitTest() docs:




Draggable.hitTest(element1, element2, threshold) - accepts 3 parameters

  • Provides an easy way to test two elements (or an element and a mouse/touch event's position) to determine whether or not they overlap according to whatever threshold you [optionally] define. By default, hitTest() returns true if there is any overlap whatsoever, but you can optionally define athreshold parameter to, for example, only return true if at least 20 pixels are overlapping or if 50% of the surface area of the elements overlap. You can also pass a mouse/touch event object as the testObject and it will check the pageX and pageY properties to determine if it's overlapping.
//simple overlap test
if (Draggable.hitTest(element1, element2)) {
   //do stuff
//test if element1 and element2 have at least 20 pixels of overlap:
if (Draggable.hitTest(element1, element2, 20)) {
   //do stuff
//test if at least 50% of the surface area of element1 and element2 overlaps:
if (Draggable.hitTest(element1, element2, "50%")) {
   //do stuff
//test if a mouse event's position (pageX/pageY) overlaps with element1:
if (Draggable.hitTest(element1, mouseEvent)) {
    //do stuff

Happy Tweening!

  • Like 4
Link to comment
Share on other sites

Jonathan I'm sorry I have not yet fully penetrated hitTest

If I change my box2 - array
how to get value from what obj - hitTest.

See the Pen pROGdg by Alex755 (@Alex755) on CodePen

Now I have divided the event, but this is not correct...
Thank you and again Sorry
I'm still learning
Link to comment
Share on other sites

Im a little confused on your question, not exactly sure what you mean, unless others in the forum understand, they can chime right in :)

Link to comment
Share on other sites

I'm confused too.


Could you tell us what exactly should be happening that isn't working?




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