Stacking cards on scroll with Bubble

louis.dretzolis · 2024-10-01T10:15:40.470Z

Hey everyone, just wanted to share something cool I found out with some help, to recreate Stacking cards on scroll with HTML / CSS.

To do so, create an HTML element on your page and fill it with the HTML and CSS from this link : https://codepen.io/tutsplus/pen/yLZBExg
You should put the CSS in brackets in the header of the HTML, and put !important statements after every CSS line.

For the layout of the HTML element, select “Display as an iFrame”, otherwise it won’t work.

And that’s it ! you have a beautiful stacking cards on scroll effect in Bubble

ridwan · 2025-01-15T12:07:43.607Z

Hi @louis.dretzolis
Can you please share screenshot of the set up at least please

Thanks

louis.dretzolis · 2025-01-15T12:45:03.941Z

Hey @ridwan ,
In the end it didn’t fit my needs exactly in terms of responsive so I ended up using a free bubble plugin called ‘Sticky Scroll’. In one big container I have created my four cards that I want to stack on top of each other. Then I have added four “Sticky” elements to the container, one per card.
The final step is to configure each “Sticky” element with the ID of each card and the offset desired.

Here are some screenshots of how i did it :

Capture d’écran 2025-01-15 à 13.43.482870×1520 372 KB

Capture d’écran 2025-01-15 à 13.44.162870×1540 445 KB

Capture d’écran 2025-01-15 à 13.44.402874×1392 393 KB

If you need more help setting this up let me know

morrismugwima · 2025-01-15T15:15:39.413Z

Thank you.

ridwan · 2025-01-17T04:01:33.195Z

Thanks @louis.dretzolis