Jump to content
GreenSock

kaplan

Anything like HitTest with GSAP or JavaScript?

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

I'm curious about using the JS GSAP to recreate something I did with Flash. I have a movieclip, I placed 'points' (little movieclips) randomly around the stage and if they hit the bigger shape I stored the position. Then I animated to those points.

 

I'm curious if there's something like an AS3 HitTest that I can use. I'm just looking for a nudge in the direction, any advice or insight would be nice.

 

Here's my original Flash animation: http://workalicio.us/

 

Thanks!

Link to comment
Share on other sites

Yes, Draggable has a static hitTest() method that you can tap into

 

 

Check out the docs: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/hitTest/

console.log("hit blue " + Draggable.hitTest("#redBox", "#blueBox")) //true
console.log("hit green " + Draggable.hitTest("#redBox", "#greenBox")) //false

 

http://codepen.io/GreenSock/pen/JYWNva?editors=001

 

 

IMPORTANT: There is no way to get pixel-perfect hit testing for non-rectangular shapes in the DOM. hitTest() uses the browser's getBoundingClientRect() method to get the rectangular bounding box that surrounds the entire element, thus if you rotate an element or if it's more of a circular shape, the bounding box may extend further than the visual edges. IE8 (and earlier) is not supported because hitTest() requires element.getBoundingClientRect() which is in all modern browsers.

 

More on Draggable: http://greensock.com/draggable

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