Jump to content


Anything like HitTest with GSAP or JavaScript?

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/



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





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.