Display a repeating group like a stack/pile of elements

[okapi]

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?

[pierre6]

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

[okapi]

Sure

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.

[pierre6]

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

[okapi]

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

[pierre6]

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.

[janiskropp]

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

[incomdies]

That’s possible ofc. Did you implement it yet?

[j2pp]

Asking if you’ve achieved this? Im trying to do the stacked effect and seem to be in a dead end

[gerbertdelangen]

Hi J, it is definitely possible, here a small example:

Here a couple of screenshots of the various elements and their settings:

Hope this helps!

[j2pp]

Interesting… Thank you so much for this!!! Will try this out

[j2pp]

Is there any possibility that we can leave the “cards” at the back instead of it reducing to numbers? Like if i can set a fixed 3 or 4 cards at the back and it will just show random images while the main view will be in order

[gerbertdelangen]

Hi J, what do you mean with ‘reducing to numbers’ and what are you trying to achieve the fixed cards and random images in the main view?

[j2pp]

Sorry, wrong choice of words lol. What i was trying to say is i noticed in the gif when you were scrolling the cards, the cards behind were being reduced. Any way to just keep the card effect stacked without it being “taken away” from the stack?