Skip to content
UI Kit
Accent color

Scroll reveals and transitions

Parts that open to reveal what lies behind, cards that fan and pile up, and sections that hand over to the next one.

3 components · 15 variants
Switch category

On this page

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

card-fan

Card fan

Cards that fan out, spread and pile up. Three open from a stack while the section scrolls in, two are played by hand, an arc you turn and a deck you deal from. Without JavaScript every card lies in its place.

Props and details · Card fan

Hand of cards

A stack opens into a hand of cards while the section scrolls in. The card under the pointer lifts out of the hand, on a phone a tap lifts it.

Open in Studio

Stack deals into a grid

The cards start as one stack in the middle and deal themselves into their grid while the section scrolls in, one after another.

Open in Studio

Arc to turn

Cards on a wide arc, the one in front stands upright. Turn it with the arrows, the arrow keys, a swipe or a click on a card.

Open in Studio

Deck of quotes

A deck of quotes beside the heading. The top card goes to the back with a button, the arrow keys or a swipe, the next one rises.

Open in Studio

Pile of prints

A loose pile of prints sorts itself into a row with captions while the section scrolls in. Each print keeps a slight turn, like paper on a table.

Open in Studio

section-transitions

Section transitions

How one section hands over to the next. The page fades into a dark band or an accent wash, a section slides over the last like a curtain, opens through a circle or pushes the one before back into a card. Without JavaScript every section stands on its own background.

Props and details · Section transitions

Into a dark band

The page fades into a dark band for one section and back out. Text fades with its background, so nothing stands on the wrong ground.

Open in Studio

Accent wash

The page takes on a soft wash of the accent for the one section that matters, a seasonal menu or an offer, then returns.

Open in Studio

Curtain

Each section slides up over the one before like a curtain with a rounded edge, the section underneath steps back under a veil.

Open in Studio

Through a circle

Each section opens through a circle that grows from the middle of the window, the one before falls back a little.

Open in Studio

Back into a card

The section before shrinks into a rounded card and moves back while the next one rises over it. Good for a before and after.

Open in Studio

split-reveal

Split reveal

Two or more parts that open while the page scrolls and give way to what lies behind. The parts carry the message, half a headline or a word each. Without JavaScript the message stands as a heading above what it reveals.

Props and details · Split reveal

Doors

Two doors with half a headline each slide apart. Behind them the shop, its name and its opening hours.

Open in Studio

Shutter with figures

An upper and a lower half part along the middle line, the figures behind them arrive one after another.

Open in Studio

Diagonal cut

The window is cut along its diagonal, both halves glide out along the cut and leave the picture behind.

Open in Studio

Torn ticket

A ticket tears at its perforation, the halves drift apart and turn, and the event details lie underneath.

Open in Studio

Five slats

Five slats with one word each slide up and down in turn. The sentence reads first, then the picture behind it.

Open in Studio

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Scroll reveals and transitions on a page.

Often searched

Jump to

Copied to the clipboard