Every pixel, in motion.
Scroll-driven animations transform static layouts into cinematic experiences. By mapping scroll progress to scale transforms, flat 2D images gain a sense of depth and momentum.
Zoom Parallax
Scroll-driven Scale Transforms
A scroll-driven zoom effect where multiple images scale at different rates as the user scrolls, creating a dramatic parallax zoom into the scene. The images are layered with CSS and each one is bound to a Framer Motion useTransform hook that maps scroll progress to a unique scale value.
The result is a cinematic "zooming in" transition that feels three-dimensional despite being built entirely with 2D transforms.
Tech Stack
Framer MotionReactCSS TransformsLenis Smooth Scroll
Key Learnings
- useScroll + useTransform from Framer Motion make scroll-linked animations declarative — no manual scroll listeners needed.
- Layering elements with different scale multipliers creates convincing depth from flat 2D content.
- Lenis smooth scroll adds inertia and polish that makes scroll-based animations feel native and fluid.