This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Benjamin Bilow
Posted Feb 10 - Read on Facebook

Trying to activate an animation when a draggable layer comes into contact with another layer. Any suggestions?

8 Comments

Andreas Wahlström

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

Joshua Tucker

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.

Benjamin Bilow

Thanks Andreas Wahlström! Worked great.

Louis-André Labadie

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:

http://share.framerjs.com/6irf9hecfjol/

Benjamin Bilow

Thanks Louis-André Labadie. Simialr idea to Andreas Wahlström which worked for my project. Best!

Antonio Krämer Fernandez

ah to late, though the math is a bit different: http://share.framerjs.com/rc112jsssbi0/

Shoshana Ellis

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?

Louis-André Labadie

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.

Read the entire post on Facebook