Skip to content
UI Kit
Accent color

Scroll effects

Moving type and depth that make a page memorable. Layers at different speeds, lines that slide with the scroll and text as a window onto a picture.

3 components · 13 variants
Switch category

On this page

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

text-scrub

Text scrub

Large type that moves exactly with the scroll, one statement per page. Lines slide against each other, words come together, a word shrinks into its place, lines rise or an outline fills. Without JavaScript the statement stands finished.

Props and details · Text scrub

Sliding lines

Three or four giant lines slide against each other while the section passes, small round pictures sit between the words.

Open in Studio

Words come together

The words of one sentence start far apart on both sides and come together in the middle while you scroll, then the line below arrives.

Open in Studio

One word shrinks into place

One word fills the window and shrinks to its place in the line while you scroll, the sentence below arrives once it has landed.

Open in Studio

Lines rise one by one

Each line rises out of its own slot, one after another as you scroll, like a page being set. The last line carries the accent.

Open in Studio

Outline fills

Giant outlined lines fill with color from left to right while you scroll, line by line. The last one fills in the accent.

Open in Studio

mask-reveal

Mask reveal

Type as a window onto a picture. The letters are cut out of the page, the picture moves behind them while you scroll, and in one variant the camera flies through a dot into the picture. Real, selectable text in light and dark mode.

Props and details · Mask reveal

Giant word

One giant word across the page, the picture glides upwards through its letters while the section passes.

Open in Studio

Fly through the dot

A short sentence ends in a dot. While you scroll the camera flies through the dot into the picture behind, and the offer arrives on it.

Open in Studio

A picture per line

Three short lines, each a window onto its own picture. Lines and pictures drift in opposite directions while the section passes.

Open in Studio

Figure as a window

A large figure is the window onto the picture, its meaning and a few facts stand beside it. For heights, distances, years.

Open in Studio

parallax-layers

Parallax layers

A scene built from layers that move at different speeds while the page scrolls, so it reads as depth. Small shifts, half as large on phones, and without JavaScript every layer rests in the composed picture.

Props and details · Parallax layers

Landscape in the accent

A drawn landscape in five layers, tinted with the accent. The heading sits between the far mountains and the near hills, the front hill becomes the page below.

Open in Studio

Floating cards

A product screen with cards floating in front of it at different depths. The nearer a card, the faster it moves, on phones two cards remain.

Open in Studio

Drifting collage

Six pictures drift around a centered message, each at its own pace. On phones four pictures remain and move half as far.

Open in Studio

Word, picture, text

A giant word far behind moves against the scroll, the picture in front moves fastest and the text in between follows. Three depths, one calm page.

Open in Studio

Similar components

More from Marketing, the same area of the kit.

Often combined with

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

Often searched

Jump to

Copied to the clipboard