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

What is Framer? Join the Community
Return to index
JinJu Jang
Posted Jul 12 - Read on Facebook

Hello everyone! :) I'm testing out a "swipe to dismiss" interaction, like as seen on Official Twitter app and somewhere else.

http://share.framerjs.com/klpv4ymcam26/

From this point, I managed to create a simple up or down dismiss interaction, based on measuring the current Y position of a layer to its original Y position.

Eventually, I'd like to add a couple of conditions, so the layer moves back to it's original position when you swipe it a little bit. In the meanwhile, swiping a lot will make the layer move away from the screen.

What I'm having trouble with is to make it return to the original position. ;/

Is there any good reference to look at?

4 Comments

Balraj Chana

Hey JinJu, I think it's easier to use the scrollComponent for this. Here's a simple way to do it. Try to swipe the card up or down. If the swiping is greater than 250px or less than -250px, then the card will be dismissed, otherwise it will animate back to its original position.

http://share.framerjs.com/fqcy678y1149/

Nils Hoenson

Hey JinJu Jang! The easiest way to achieve this is by restricting the Y coordinate of the layer you want to keep/dismiss. In the example I made I stored the original Y value of the layer and animated the layer back to its origin when the Y value was bigger or smaller than a a certain number.

Here's the example I made to demonstrate what I just said:
http://share.framerjs.com/h8nasuxzcqlz/

Nils Hoenson

Balraj Chana his solution works as well. Only just saw his comment :-)

Claudio Silva

I went with the same solution as Nils Hoenson, I stored the original Y position, and then if you swipe less or more the original Y + or - 200 it goes back to that original Y else it animate to out of the screen. it sounds confusing but have a look at the code and you will understand.
http://share.framerjs.com/mw1nmyh2hb05/

Read the entire post on Facebook