Stacking Cards

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

51 sectionsView all →
1–5 of 51
Scroll effects

Stacking Cards

Responsive · Animated
Scroll effects

Pinned Scroll Story

Responsive · Animated
Scroll effects

Horizontal Scroll Gallery

Responsive · Animated
Scroll effects

Scroll Path Timeline

Responsive · Animated
Features

Icon Grid Features

Responsive · Animated

Stacking Cards — Free Website Section Template

Scroll effects · v1.0.0 · Updated 2026-10-22 · Responsive · GSAP animation · HTML, React & Vue

CategoryScroll effects
Tagsscrollstacking cardssticky cardspinnedfeaturesgsaplight
Updated October 20, 2026

What's included

Features

Cards pin and stack as visitors scroll
Covered cards shrink and dim for depth
Light, tinted and dark card looks in rotation
2 to 6 cards with icon, label, title, text and image
Image optional: text-only cards fill the width
Normal column on phones and without JavaScript
GSAP ScrollTrigger pins with scrubbed scaling
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Stacking Cards on Scroll — Free GSAP Section Template

Stacking Cards: Feature or service cards that stack up as you scroll. On larger screens each card pins a little below the one before, the next card slides over it, and the covered cards shrink and dim, so the section reads like a deck being dealt. Each card has an icon, label, title, text and an optional image. Without JavaScript and on phones the cards form a normal column.

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.

Why use it

Why Use the Stacking Cards

🂠
One message at a time
Each card gets the full screen for a moment, so every feature or service is actually read.
⧉
Depth without clutter
The stack shows how much you offer while keeping the current card in focus.
✓
Safe by default
Pins only switch on with GSAP on larger screens; everywhere else it is a plain list of cards.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and cards in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🚀
Feature highlights
Give a SaaS product’s four biggest features a card each, with a screenshot, so visitors absorb them one by one before reaching pricing.
🧰
Agency services
Present brand, web, product and growth services as stacked cards with a short pitch and an example image for each discipline.
💡
Values or principles
Share the principles behind a company or nonprofit as text-only cards with an icon, letting each value land before the next slides over it.
🏋️
Programmes or plans
Stack training programmes, courses or packages with what each includes, so people compare them in order before choosing one to book.

Got questions?

Frequently Asked Questions

GSAP ScrollTrigger pins each card a little lower than the one before until the last card arrives. While the next card slides over, the covered card scales down and dims, scrubbed to the scroll.

Below 768px the cards are a normal column without pinning, which is easier to read on small screens.

No. Leave the image empty and that card becomes text-only and spans the full width.

The pinned card is positioned by ScrollTrigger, so the scale is applied to its inner wrapper to keep the pin and the shrink effect from interfering.

It saves an editable copy of your Stacking Cards in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.