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

What is Framer? Join the Community
Return to index
Stefanie Hyde
Posted Feb 13 - Read on Facebook

Hey all!

Framer noobie over here, looking for some input.
So im currently working on a mini prototype and have gotten three of the layers to drag and snap to the location that I want. Is there any way to make these three layers to also drag and snap to a second spot after the first action?

This may have been worded confusingly.. haha. Let me know if you need clarification. Any help is greatly appreciated!

6 Comments

Benjamin Den Boer

Hey Stefanie Hyde, yes. I've put together a little prototype for you of a draggable layer that can snap to two different drop areas, depending on a distance you can specify. The distance is calculated from the center of the layer to the center of the dropArea. If dropped close enough, the layer will snap to either of the dropAreas, and animate towards the center of it. You can extend this behaviour to multiple layers as well. The snapping animation also includes a little extra scaling animation to clarify the snapping behaviour. :-)

See video: http://cl.ly/Zl1O/draggable-snapping.mov
Download: http://share.framerjs.com/v1vc339eqf4x/

Stefanie Hyde

Thank you SO much!!!

Stefanie Hyde

Is there anyway I can get the layer to only snap to those two places? and not let them land anywhere else on the screen?

Benjamin Den Boer

Hey Stefanie Hyde, sure. You can modify the conditional statement and base it on the deltas from either center point instead of a defined distance. Since in this example we're using the middle points, it happens that when you release it the distance between all points is exactly the same, in that case, we simply pick one to snap to. You can also extend this to be random if you'd like.

See: http://share.framerjs.com/10kd0p0055t5/

Jordan Robert Dobson

Great example Benjamin Den Boer.

Stefanie Hyde

Thank you Benjamin! You've been a great help :)

Read the entire post on Facebook