Skip to content
UI Kit
Accent color

Scroll animations and scroll stories

Sections that tell while the page scrolls. Cards that stack, rows that move sideways, pictures that zoom open and media that stays while chapters change.

4 components · 20 variants
Switch category

Sections that tell while you scroll

A scroll story turns the scroll into a narrative, one chapter at a time. The four components here render their finished layout on the server first, so the content is there without JavaScript, and they rest with reduced motion instead of moving anyway.

Sticky stack lets cards slide over each other, built in plain CSS, good for features, a process or case studies. Sideways scroll moves a row to the side while the page goes down, with a counter that shows how far you are, and gets its own layout on phones. Zoom reveal grows a picture or a product to the full window. Pinned media keeps a picture, a map or a browser in place while the chapters change beside it.

Use one scroll story per page, two compete for attention. Keep each chapter to a headline and two lines, people scroll faster than they read. Check the page with reduced motion switched on once, the finished layout should still tell the whole story.

On this page

Every component of this category. Pick one to jump to its variants.

pinned-media

Pinned media

A medium that stays while the chapters change, and every change is a visible transition. Pictures fade with depth, a camera travels over a map, pictures wipe, a film strip runs on and screens slide in a browser.

Props and details · Pinned media

Full window pictures

Pictures fill the window behind cards that scroll past. Each one fades in from a slight zoom when its card arrives, the marks on the right count along.

Open in Studio

Camera over a map

One large map stays, and the camera travels to the place of each chapter, pulling back a little between two stops like a real move.

Open in Studio

Wipe through a day

The pictures of one day replace each other with a wipe from the right, the chapter text rises with each one and the list beside it keeps count.

Open in Studio

Film strip

A portrait frame with a film strip that moves on with every chapter, the picture in front grows to full size. The text changes beside it.

Open in Studio

Browser with tabs

A browser window stays, the screens slide sideways from chapter to chapter. The tabs above fill as you go and jump to their chapter on click.

Open in Studio

sideways-scroll

Sideways scroll

A section that moves sideways while the page scrolls down. It stays in place until its row has passed, a line and a counter show how far you are. On phones each variant has its own layout, without JavaScript the row scrolls by hand.

Props and details · Sideways scroll

Service cards

Cards with an icon, a price line and a number that lights up when the card reaches the reading line. On phones a list.

Open in Studio

Timeline

Years on a line that fills while you pass them, the year in focus brightens. On phones the line runs downwards.

Open in Studio

Wide chapters

One wide panel per chapter, text beside a picture, the story reads from left to right. On phones the panels follow each other downwards.

Open in Studio

Product row

A shop row with prices and labels that ends on a tile to the whole collection. Pictures zoom a little on hover, on phones it is a swipe row.

Open in Studio

sticky-stack

Sticky stack

Cards that stack on top of each other while the page scrolls. The next card slides over the last one, which steps back a little. The stacking is plain CSS, so it works without JavaScript too.

Props and details · Sticky stack

Feature cards

Large cards with text beside a screen. Each one sticks a little lower than the one before, the covered card shrinks and dims.

Open in Studio

Process with title strips

Steps stack like tabs in a folder. The title strip of every step stays readable above the next one, its body fades under it.

Open in Studio

Case studies

Full pictures with the result in large figures. They pile up like prints, the picture zooms a little on hover.

Open in Studio

Heading and quotes

The heading stays on the left while quotes with a figure stack on the right. On phones the heading comes first and the quotes stack below.

Open in Studio

Pile of notes

A centered pile of notes with a picture each. They land slightly turned, like paper on a desk, and step back as the next one covers them.

Open in Studio

zoom-reveal

Zoom reveal

A picture or a product that zooms from small to the full window while the page scrolls. The heading steps back, the picture grows, and its own text arrives at the end. Without JavaScript the finished layout stands there.

Props and details · Zoom reveal

Photo to full window

A photo grows from a card below the heading to the whole window, and settles from a slight zoom inside. The place and an offer arrive on it at the end.

Open in Studio

Product screen

A screenshot rises from below the heading and grows to the width of the page, then four notes appear on it one after another. On phones the notes line up underneath.

Open in Studio

Film

The poster of a film grows to the window, the play button lands in the middle and starts the film. Use it for an image film or a product video.

Open in Studio

Grid to one picture

Nine pictures fill the window. The middle one grows until it covers everything, the others drift out with it, and the closing text arrives on it.

Open in Studio

App icon to phone

An app icon grows into the phone that shows the app, then its features arrive on both sides. On phones they line up below.

Open in Studio

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Scroll stories on a page.

Often searched

Jump to

Copied to the clipboard