Scroll Reveal
An animation pattern where elements fade, slide, or scale into view as they enter the viewport on scroll.
Scroll-reveal uses IntersectionObserver (or libraries like Framer Motion's whileInView) to trigger entrance animations the first time an element scrolls into the viewport. The animation is usually short (200–500ms) and subtle — opacity 0→1 with a small Y translate (+16px → 0) is the canonical version.
The pattern adds polish and rhythm to long marketing pages without committing to scrollytelling complexity. Done badly (slow, large translates, applied to everything) it makes pages feel sluggish.
- Marketing pages adding rhythm to long scroll
- Section openers, feature cards, testimonials
- Above-the-fold content (delays first paint perception)
- Reference / app UIs where users want immediate access
- +Trigger only once — use `viewport: { once: true }`
- +Keep duration short (200–400ms) and translate small (≤24px)
- +Stagger children by 40–80ms for cohesion
- −Don't reveal critical CTAs — they should be visible immediately
- −Don't animate every element — pick the section opener
People also ask
What is scroll reveal?
A pattern where elements fade, slide, or scale into view as the user scrolls them into the viewport, instead of appearing instantly when the page loads.
When is scroll reveal worth using?
Marketing pages, storytelling layouts, and editorial sites where the reveal earns a beat of attention. Avoid in dense product UIs where it slows users down.
How do I implement scroll reveal?
Use the IntersectionObserver API to toggle a 'visible' class, then animate via CSS transitions. Modern: use scroll-driven CSS animations directly.
Should I respect reduced motion for scroll reveal?
Yes. Wrap reveal animations in @media (prefers-reduced-motion: no-preference), so users with motion sensitivity see content immediately.