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

What is Framer? Join the Community
Return to index
John Lee
Posted Jul 05 - Read on Facebook

I'm trying to implement a data-driven version of the Tinder Card swipe interaction, any pointers on threshold when dragging the card?
Thanks!

5 Comments

John Lee

Jonas Treub hey mate, any pointers on this?

Jonas Treub

I'm not sure what you mean with threshold. Could you describe the problem?

John Lee

Hey Jonas! Threshold is the snapping params when dragging to indicate the card has been fully swiped or not enough and returns to the current state. Make sense? In layman terms: when the top card is moved past 60% of its width then it animates out of view. If less than 60% then bounces back to position.

Jonas Treub

You probably want to take velocity into account. On drag end you can get the velocity out of the event object. If the velocity.x is smaller then a certain threshold, animate it off the screen to the left. If the velocity is small snap back to the center. Makes sense?

Jonas Treub

Here is a quick example: https://framer.cloud/zXYKU

Read the entire post on Facebook