Library / Scroll animation

Split Scroll free

Two pinned columns moving in opposite directions so each picture meets its matching text in the middle row.

Scroll inside the preview to try it.

Customize

Pairs written as Title — text

A picture for each pair

Space around the pictures (px)

Ease to the nearest pair when scrolling stops

Code

import SplitScroll from './SplitScroll';

<SplitScroll />

Checking your access…

Dependencies: none

scroll columns pinned pairs

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.