Scroll Animations
Scroll-linked motion — a dithered portrait that develops in the scroll, a cinematic 3D fly-through, pinned media sections, rising image cards, parallax layers, viewport reveals and a pinned horizontal section.
7 demos · hover a stage to interact · press Replay to re-run
Each stage owns its own scroll container, so the demos work inline without hijacking the page. To run the dithered develop on your own picture and take the code for it, use the Pixel Studio.
Dithered photo develop
A print coming up in the tray. A JPEG is thresholded through an 8×8 Bayer matrix into ink cells, each holding its own scroll threshold, so the photo develops in grain instead of fading in.
- canvas
- Bayer dither
- useSpring
- devicePixelRatio
Cinematic tunnel
Scroll flies the camera down a corridor of screens. Scroll velocity — not position — drives the motion blur, so hard scrubbing smears the corridor while the titles stay sharp.
- CSS 3D
- preserve-3d
- useVelocity
- perspective
scroll to enter
WelcometoDARWIN’SuniverseofHERO+TEXTandSCROLLmotionENGINEERING
Sticky media sections
A pinned clip column beside text that advances with the scrollbar. Clips push each other out vertically while the heading decodes into place.
- sticky
- useMotionValueEvent
- push swap
- scramble
Hero sections
Above-the-fold openers that set the tone before a single word is read — cursor spotlights, drifting gradient meshes and curtain reveals.
Rising image cards
A row climbing out of the bottom edge, each card at its own rate so the fan holds at every scroll position. The artwork counter-drifts inside its mask.
- useScroll
- per-card rate
- mask parallax
Parallax layers
One scrollYProgress mapped to three different travel distances.
- useScroll
- useTransform
- container
Parallax
Reveal on view
Rows fade, rise and unblur as they cross the container's viewport edge.
- whileInView
- viewport.root
- margin
scroll ↓
Discovery
Audit, interviews, a shared vocabulary.
Direction
Two routes, one chosen, the other archived.
Design
Components before pages, always.
Build
Shipped behind a flag, measured, widened.
Care
The part everyone forgets to budget for.
Pinned horizontal scroll
Vertical scroll inside the stage is remapped to horizontal travel.
- sticky
- useScroll
- x transform