Jump to content
Search Community
Xsander775 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

Hi

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

Alex.

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:

 

https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/hitTest/

 

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

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