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

What is Framer? Join the Community
Return to index
Dhruv Saxena
Posted Jul 17 - Read on Facebook

Is there a way to add collision detection between layers? For example, if there are 2 circle layers which are draggable within the canvas, can we do something that they do not intersect each other, but instead bounce off when they collide?


Benjamin Den Boer

Yes! Eelco Lempsink is your man for this. ;-)

Dave Crow


Brent Riddell

Also following ...

Misha Scholte

Perhaps you can check the x & y values of both the layers. If they are the same, bounce

Josh Ackerman

To provide an alternative solution, you can use force layouts and D3.js to achieve this.

Kevyn Arnott

The big challenge is limiting the calculations that need to be performed. This is one way to do it. Drag the boxes, and when they touch they'll turn red –

Dhruv Saxena

Here is what I found - it is possible to include p5js in framer.

Eelco Lempsink

I played a bit with collision once, but it’s pretty tricky to get correct in Framer itself. I would love to see what you come up with Dhruv!

Here are two prototypes of my experiments:
- Very (very) rough bounce on collision (with squares):
- Collision detection for circles (relatively easy, using Pythagoras’ theorem):

Dhruv Saxena

Thanks Eelco! Ideally, I'd like to be able to create simulations like the ones I have created here -
And the combine them with gravity using the phone's accelerometer. The dating app - "happn", uses something very similar.

Antonio Krämer Fernandez
Antonio Krämer Fernandez
Read the entire post on Facebook