Scroll velocity: 3D planes
Matt Perry
In this tutorial, we're going to build the Scroll velocity: 3D planes 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 velocity: 3D planes 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 velocity: 3D planes" example creates an immersive 3D carousel, creating a wave-like effect that ripples through the gallery with an intensity linked to the current scroll velocity. When you hover over an image, it lifts toward you and reveals an animated label with Motion's ScrambledText component.
This example uses several Motion APIs to achieve these effects:
useMotionValue– tracks scroll position.useMotionValueEvent– subscribes to motion value changes.useSpring– creates smooth, physics-based animations.useVelocity– detects scroll speed.useTransform– calculates 3D transforms.wrap– wraps values within a range for infinite looping.AnimatePresence– handles exit animations.Motion+
ScrambleText– animates the text reveal effect.onPan– enables touch/drag interactions.
