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?


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:

Read the entire post on Facebook