Library / Scroll animation

Grid to One free

A wall of pictures drifts apart and fades while the centre tile grows to full screen behind the next heading.

Scroll inside the preview to try it.

Customize

Pictures for the grid (they repeat)

The heading that appears at the end

Tiles across

Tiles down

Space between tiles (px)

Code

import GridToOne from './GridToOne';

<GridToOne />

Checking your access…

Dependencies: none

scroll grid hero collapse

More in Scroll animation

Scroll Video (Frames)Plays a video as the visitor scrolls, either as a pinned full-width scene or inside a single card. Works from numbered frames.
Timeline ScrollA vertical timeline whose glowing line draws itself as you scroll while milestones light up and slide in.
Drawn Process LineProcess cards zig-zag down the page while one line draws itself behind them and each card switches on as the line arrives.