Display a repeating group like a stack/pile of elements

Hi, we want to build a dating app like Tinder.
And since the plugins for bubble out there, that imitate the functionality of Tinder are not that great or dont have that much customisation, we want to build it a bit differently.

Our idea is to display all the images and usernames… in a repeating group and then use a plugin for swipe detection and dragable elements.

The only problem right now is, that i havent found a way to display a repeating group as a stack/pile of elements.

Does anyone know how to do that or would be willing to develop a plugin for that?

I dont really visualize it, what do you mean by “stack/pile” of elements ? Can you share a picture or something?

Screenshot 2022-02-22 194003
Or look at this figma prototype. When you click on the heart or the “x”, the cards swipe to the left or right
Figma Prototype

So basicly each card should be a group in Bubble with an image and a little bit of content. All pulled from the database.

Nice prototype !

That’s a bit messy and you will probably be able to do much better with a bit of work but here is someting similar : https://testcandidatestur.bubbleapps.io/version-test/stackpile?debug_mode=true

What you wanna do is :

  1. Create a 1 x 1 fix number of cells RG
  2. Add image to RG
  3. Add buttons to RG
    Right button workflow : show next RG’s entry + animate image in some way
    Left button workflow : show previous RG’s entry + animate image in some way

wow… Thanks alot for that. That is like 95% of what i needed.

Do you think, it would be possible, to already show the 2nd and 3rd image that is to come below the top one? so that when the top one slides away, you can already see the next one?

But what you provided is allready amazong. thanks for that :slight_smile:

That for sure would improve the UI but im not too sure how to tackle it.

You would need to be abble to add both image to the RG cell,

  • One above with the datasource current cell's image
  • The other behind and trying to retrieve something like current cell's +1 image but that might not be easy. The easiest way I can think of is to store an incremental id on every image (depending on your use case you might or might not be able to do that) otherwise working with Current cell's index and/or Custom states might be way.

Hey all, i have build a simmilar Project. I struggeld with the change to the next Item. The content was loaded very delayed. The picture was loaded first, some Text items changed later. Could you solve that? Does your next Item of the Stack get loaded fast?

Thank you :slight_smile: