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

What is Framer? Join the Community
Return to index
Brandon Souba
Posted Feb 12 - Read on Facebook

I'm looking to recreate the "stacked cards" UI from tinder. The swipe logic isn't what I'm looking for - I've already created a loop to create the cards and "push" them back in space behind one another - but I'm curious how you could create a "endless" stack where if I swipe off the first card, we automatically "update" the positions of the rest of the stack and add a card at the end. Any tips?

2 Comments

Josh Puckett

Conceptually, have positions for firstPosition, secondPosition, thirdPosition. These will be display properties that will be assigned to array elements. Array could be any length, but array[0] is assigned firstPosition and so on. After you swipe away a card, simply remove array[0], add whatever you want to the end of the array, and then have some function updatePositions that loops across the array and reassigned positions. So what was in secondPosition, array[1], is now array[0] so will be updated to firstPosition.

Brandon Souba

Thanks for the tips: https://framer.cloud/NPvrO

Read the entire post on Facebook