Trying to activate an animation when a draggable layer comes into contact with another layer. Any suggestions?
something like this, maybe: http://share.framerjs.com/23s455ff1nbq/ . make sure to check if the layer is already animating to ensure it only runs once. more on collision detection: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
Hey Benjamin! This is a tough one, with my meager math skills anyway. You would need to check whether any part of the draggable layer's frame is inside the other layer (x, y, maxX, maxY).
The other option I have tinkered with is using the DragEvent's x/y coordinates and use the distance formula to determine how far away your mouse (or finger) is away from the center of the other layer. Then, you would need to subtract out the distance from the other layer's center to the edge of its frame, along with figuring out where the TouchEvent is relative to the frame of the draggable area. Then, if your mouse or finger exceeds some threshold, you would know whether it came in contact/is inside or not.
Thanks Andreas Wahlström! Worked great.
Hi Benjamin! 2D collisions are something I'm familiar with, and I've reproduced a solid formula in Framer for you to use :)
I strongly suggest making sure both layers share the same origin coordinates. Here is an example that should handle any two rectangle-shaped layers:
Thanks Louis-André Labadie. Simialr idea to Andreas Wahlström which worked for my project. Best!
ah to late, though the math is a bit different: http://share.framerjs.com/rc112jsssbi0/
Louis-André Labadie if I set this up so that my drag event moves the other object, is there a way to get it to move in a different direction if they overlap again?
Shoshana, do you mean the dragging behavior would be different once they've overlapped?
If it's something simple like reversing the drag direction, the "Framer way" of doing this would be to change your draggable layer's .speedX / .speedY properties to negative values. More complex movements would require that you handle the drag with your own function I believe.