Stack cards on scroll in WordPress

Each card pins near the top while the next one slides up over it, like a deck being dealt. It’s one switch on a Group.

Get Grinner free

See it live

Type

An upgrade to the Group block

Find it

Group, Stack layout, then Scroll effects

Phones

Stacks there too, or switch it off

Speed

Cards only pin. There’s no animation running as you scroll

Live demo

Scroll, and the cards pile up.

This is the real Card stacking setting, running on this page.

01 · PLAN

Sketch the pages.

List the pages you need and what each one is for.

Card stacking example, a note card with three lines and a sparkle

02 · DESIGN

Pick the look.

Set your colors and fonts once, in Styles.

Card stacking example, four color swatches above two type samples

03 · BUILD

Add the motion.

Turn on Grinner effects on the blocks you already use.

Card stacking example, the Grinner mascot on a dark screen

04 · LAUNCH

Check the speed.

Publish, then run PageSpeed and enjoy the score.

Card stacking example, a round 100 score with a sparkle

Settings Card stacking on Stack offset (px) 24 Peek (px) 16

What you can change

The settings worth knowing.

Three numbers and a switch. That’s the whole thing.

Card stacking example, stacked cards stopping a set offset below the top of the screen

Stack offset (px)

Where the first card pins

How far below the top of the screen the first card stops. 0 to 200, and 24 by default.

Card stacking example, four stacked cards each peeking 16px below the one before

Peek (px)

How much shows above

Each card pins this much lower than the one before, so a strip of every card stays in view. 0 covers each card fully.

Card stacking example, a phone showing four cards as a plain list

Disable on mobile

A normal list on phones

Phones stack too, by default. Turn this on and the cards sit one under another, with nothing pinned.

Card stacking example, a cream card with a soft shadow

Card Mode

Solid cards stack best

Cards need a solid background, or the ones below show through. Card Mode’s Soft or Elevated look gives each card one, with a shadow.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Put your cards in a Stack

Add a Group, choose Stack, and make each card a Group with its own background.

3

Turn on Card stacking

It’s in the Stack’s Scroll effects panel. Set the offset and the peek, then publish.

Good to know

Fair questions.

Card stacking is a Grinner setting on the Group block. As the page scrolls, cards pin and pile on top of each other instead of scrolling away. Use it to tell a story in steps, such as a process, a timeline or a set of features.

The cards only pin in place as you scroll, so nothing is animating while you read.

The cards stack on phones too. If you’d rather have a plain list there, turn on Disable on mobile.

Nothing changes, because the cards only pin. Nothing slides on its own.

No. It works on a Stack or a plain Group, and the first 12 cards each get their own step.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

Studio-quality design
Built for speed
Pay once, no subscription

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All scroll and motion features

See it in the plugin page’s Four families