Stacking Cards deals your features or services like a deck. As visitors scroll, each card pins a little below the one before, the next card slides over it, and the covered cards shrink and dim, building a neat stack that reads one card at a time.

Four cards, or six

Cards are an editable list of 2 to 6, each with an icon, label, title, text and an optional image. Cards cycle through three looks (light, tinted and dark) so the stack stays easy to tell apart.

Solid foundations

Without JavaScript, on phones and while editing, the cards form a normal column, so nothing depends on the animation. The effect uses GSAP ScrollTrigger pins with stepped offsets and scrubbed scale, and respects reduced motion.

Follow it with a Gradient CTA Banner to turn interest into sign-ups. Export HTML, a ZIP, React or Vue.

Getting the most from it

Keep each card to a single idea, a short title and two lines of text, because stacked cards cover each other as you scroll and the previous card is only half visible. Four to six cards is the sweet spot: fewer feels thin, more makes the page long. Put the strongest point first and the call to action in the last card, and link every card to a deeper page so the section also feeds your internal links.