Anything like HitTest with GSAP or JavaScript?

[kaplan]

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!

[Carl]

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