Scroll-driven animation
Also called scroll-linked animation or scroll scrubbing
An animation whose progress is tied directly to the scroll position, so it moves forward as you scroll down and rewinds as you scroll up.
import { useRef } from 'react';
import {
motion,
useReducedMotion,
useScroll,
useTransform
} from 'motion/react';
export function ProductShot() {
const ref = useRef<HTMLDivElement>(null);
const reduceMotion = useReducedMotion();
// 0 when the image's top enters the viewport, 1 when its center reaches the viewport's center.
const { scrollYProgress } = useScroll({
target: ref,
offset: ['start end', 'center center']
});
// Scroll position drives every value, so scrolling back up plays it in reverse.
const rotate = useTransform(scrollYProgress, [0, 1], [-8, 0]);
const scale = useTransform(scrollYProgress, [0, 1], [0.9, 1]);
const opacity = useTransform(scrollYProgress, [0, 1], [0.4, 1]);
return (
<section className='flex min-h-[150vh] items-center justify-center'>
<div ref={ref}>
<motion.img
src='/products/headphones.png'
alt='Wireless headphones in matte black'
style={reduceMotion ? undefined : { rotate, scale, opacity }}
className='w-80 rounded-3xl shadow-xl'
/>
</div>
</section>
);
}Make the product image rotate from -8deg to 0deg and scale from 0.9 to 1 as its section scrolls into the middle of the viewport, tied directly to scroll position so it reverses when scrolling up. Use CSS animation-timeline: view() inside @supports with a static fallback, animate only transform and opacity, and turn it off when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Scroll-driven animation?
In a scroll-driven animation, the scroll position works like the playhead of a video. Scroll a quarter of the way and the animation is a quarter done; scroll back and it plays in reverse. Progress rings, product shots that rotate into view, and headers that shrink as you scroll all work this way.
CSS can do it without JavaScript: animation-timeline: scroll() ties a keyframe animation to a scroll container, and view() ties it to an element’s trip through the viewport. Browser support is still uneven, so wrap it in @supports (animation-timeline: scroll()) and keep a static fallback. In React, Motion’s useScroll returns progress from 0 to 1 that you can map to any style with useTransform.
Animate transform and opacity so scrolling stays smooth, and tone down large scroll-linked movement for people who prefer reduced motion. A light spring on the progress value softens jumpy mouse wheels, at the cost of a slight lag.
Often confused with
- Scroll reveal
- A scroll reveal plays once, at its own speed, when an element appears. A scroll-driven animation follows the scroll position the whole way, forward and back.
Related terms
All termsParallax scrolling
A scroll effect where background layers move slower than the foreground, which creates a sense of depth as the page scrolls.
Scroll progress bar
A thin bar at the top of a page that fills from left to right as the reader scrolls, showing how much of the article is left.
Scroll pinning
A scroll effect that holds a section in place while its content animates through several states, then releases it to scroll away.
Reduced motion
An operating system setting that asks apps to minimize movement, which websites detect with the prefers-reduced-motion media query.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.