Stacking cards on scroll

Design help Animations & Interactions
1

Hi all,

I’m trying to get this effect of cards stacking and i was following this tutorial.

You can see my attempt here but it doesn’t seem to work. I want the sections to stack on scroll.

Any ideas?

Thanks!

Here is my public share link: LINK

2

Hi Nabeel, welcome back ! long time :slight_smile:

  1. You have .cd-section inside .cd-section, that is not a good practice.
  2. The tutorial is kinda old, you can now give position:sticky with the Webflow interface. No need for custom code.
  3. position:sticky doesn’t work well with any parent element that have any overflow property beside visible, so remove all these.

Once you fix these problems, it will work

3

Hi Avivtech,

Thanks for the welcome and advice. I tried it but it doesn’t seem to work. I maybe doing something else wrong.

Please have a see here.

4
  1. You still have 2 divs, one inside each other with the same classname (cd-section)
  2. You still have Overflow hidden on the sections-wrapper element and overflow auto on the body.
    Fix these for it to work
5

Sweet it worked! Thanks @avivtech! But now i have a huge blank space between the last section and footer :expressionless: