How to do collision detection with CSS plugin?

[KokoDoko]

I am trying to figure out how to do collision detection with greensock and the CSS plugin.

My CSS elements all have "position: absolute" and they are moved across the screen setting their x and y positions with TweenLite.

 

Normally you could use the DOM elements' position to calculate if their boundaries intersect, but how can you do this with css transforms?

 

Thanks!

[OSUblake]

Use Element.getBoundingClientRect(). It reports back is bounding box with transforms.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

 

If you're using Draggable, it can do this for you. There's a static method where you can pass in 2 elements and an optional threshold.

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