Skip to content
UI Kit
Accent color

Scroll journeys

A number, a picture or a marker that travels while the page scrolls. Counters through stages, flipbook frames and paths that draw themselves.

3 components · 13 variants
Switch category

On this page

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

number-journey

Number journey

One large number that travels through stages while the page scrolls. It counts, grows a bar, rolls over with its unit, parts ways with a second number or fills a ring, always exactly with the scroll. Without JavaScript every stage stands in a row of figures.

Props and details · Number journey

Counting through the years

The number counts from stage to stage and rests at each one, the rail below fills and the text of the stage rises beside it.

Open in Studio

Number and bar

The number and a long bar grow together, each stage is a mark under the bar. For savings, capacity or anything that adds up.

Open in Studio

Rolling counter with units

A number per stage with its own unit, they roll over like a counter. Made for times that shrink, from days to hours to minutes.

Open in Studio

Two numbers part ways

Two numbers change over the years in opposite directions, two lines draw beside them. The accent marks the one that matters.

Open in Studio

Ring that fills

A ring fills around a percentage while you scroll, the stages sit left and right of it and light up when the ring passes them.

Open in Studio

image-sequence

Image sequence

A drawn picture that changes frame by frame while the page scrolls, like a flipbook. A mug turns, a lamp comes together, a house goes from sunrise to night, a plant grows. Drawn in SVG, no image files, the steps change beside it.

Props and details · Image sequence

Turning product

A glazed mug turns once around its axis while you scroll. Handle and stamp travel around it, the light stays where it is.

Open in Studio

Parts come together

A desk lamp starts in its parts, each with a label. While you scroll the parts come home one by one, from the base up, and the lamp switches on.

Open in Studio

From sunrise to night

A house with solar panels through one day. The sun crosses the sky, the yield counts up, then the windows light up and the stars come out.

Open in Studio

Something grows

A plant grows out of its pot while you scroll, the stem draws itself, leaf by leaf, until it flowers. For growth of any kind.

Open in Studio

path-journey

Path journey

A marker that travels along a path while the page scrolls, the path draws itself behind it and the stations on the way light up. A process, a delivery, a cycle or an ascent as one continuous way.

Props and details · Path journey

Winding route

A path winds through the section from card to card, left and right, and is measured from the layout, so any number of steps works. On phones it runs down the left edge.

Open in Studio

Parcel on its way

A parcel travels a road from the shop to the door, the status below changes at every stop. On phones the road runs downwards.

Open in Studio

Closed cycle

A marker travels a closed ring, the station it reaches appears in the middle. For anything that comes back to its start, repair, refill, a yearly plan.

Open in Studio

Ascent with height

A climb along a mountain profile, the height counts along and the huts on the way light up. For tours, training plans or any goal with stages.

Open in Studio

Similar components

More from Marketing, the same area of the kit.

Often combined with

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

Often searched

Jump to

Copied to the clipboard