Scroll Zoom Hero
Matt Perry
In this tutorial, we're going to build the Scroll Zoom Hero example step-by-step.
This example is rated advanced difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Scroll Zoom Hero tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Scroll Zoom Hero example shows how to create a cinematic hero section where a background image scales up, blurs, and fades out as you scroll. This creates an immersive entry effect commonly seen in modern web design.
This tutorial uses three Motion APIs: useScroll for tracking scroll position within a specific range, useTransform for converting scroll progress into multiple animation values, and the style prop for applying those animated values to elements.
