Content fades in and slides up as it enters the viewport.
Scroll-triggered reveals are everywhere, but most implementations use Intersection Observer with manual animation control. useScroll from motion/react maps scroll progress directly to transform values, giving you a continuous relationship between scroll position and visual state.
useScroll with a target ref tracks the element's position in the viewport. offset: ['start end', 'end start'] defines the range: when the element's top enters the viewport's bottom, progress is 0. When the element's bottom exits the viewport's top, progress is 1.
Scroll-driven reveal
Fade in as you scroll
Loading...
useTransform maps scroll progress to a Y offset (60px to 0) and opacity (0 to 1). The element slides up and fades in as you scroll down, then reverses as you scroll back up.
Slides up + fades in
Y translation from 60px to 0
Loading...
Changing the transform range from [0, 0.5] to [0, 0.3] makes the reveal trigger earlier. The element is fully visible before it reaches the center of the viewport.
Custom trigger point
Triggers earlier (0.3 instead of 0.5)
Loading...
Multiple items with useTransform at delayed ranges create a stagger effect. Each item's progress starts 0.08 later than the previous one, so they reveal sequentially as you scroll.
Loading...
Tune the scroll reveal.
Scroll-driven
Reveal on Scroll
Loading...