Rebuilding Stacking Sticky Cards Section

Hello there talented Webflow-ers!

Rebuilding existing websites with unique design flows has been a beautiful challenge in learning Webflow, but I would deeply appreciate some insight on how to achieve a particular effect with stacking sticky cards that I’m struggling with. Let me explain.

I’m practicing rebuilding this site: urbanvillageproject.com — which has a very unique stacking card effect, with chapter markers sticking out the bottom of a stacked card section. Together, they take up 100% of the viewport, even though each card seems to have a different VH (which seems to make room for the card summary underneath.

While I have wrapped the whole section in a div and have the sticky effect (sort of) down — I’m not very confident on how to achieve this effect, even responsively. I even attempted to define progressively shorter VH measurements to each card so that the chapter marker peeks out, but it’s become quite sloppy.

When looking further down the reference site (to 2.3 Designed for disassembly), I notice that the chapter marker seems to be positioned absolute with a matching background color & that the contents of that card are longer than the card itself. So it doesn’t fit and has a scroll, which is great, if I could figure out how to do that…

Something that may also be helpful to me in both understanding how rebuilds work, given I am practicing rebuilding an existing site, I have poured through the inspected code — is there a resource on how to read and kind of rebuild a site in Webflow by perusing inspected code? (Of course, learn code; but if there’s a targeted resource anyone has in mind as I progressively grow my understanding — this would be insurmountably helpful).

Thank you in advance for any insights you might provide. :slight_smile: Thrilled to be learning beside all of you.


Here is my site Read-Only: Webflow - (New) One Larchmont

hi @victorc you can achieve this effect with help of GSAP I have created for you a simple example to start with. :wink:

Hope that will help to solve your request.

Hi Stan!

Thank you so much for this. This is monumentally helpful. I’ll do my best to implement it and see what I come up with. :slight_smile:

1 Like

hi @victorc happy to help, if you do not need further informations feel free to close your request as solved

PS: please read GSAP docs to get CDN links for GSAP and ScrollTrigger as they need to be installed to make it work.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.