Scroll Reveal

Intersection-observer entrance animations with 4 directions (up, down, left, right) and configurable delay, duration, threshold. Includes StaggerReveal for cascading groups.

revealentrancestaggeruseInView

Installation

bash

# Copy scroll-reveal.tsx to your project
cp components/ui/scroll-reveal.tsx your-project/components/ui/scroll-reveal.tsx

How to use

tsx

import { ScrollReveal, StaggerReveal } from "@/components/ui/scroll-reveal";

tsx

<ScrollReveal direction="up" delay={0.2}>
  <h2>This fades in from below</h2>
</ScrollReveal>

<StaggerReveal direction="up" staggerDelay={0.1}>
  {items.map(item => <Card key={item.id}>{item.name}</Card>)}
</StaggerReveal>

Dependencies

framer-motion

Exports

ScrollRevealStaggerReveal

File

components/ui/scroll-reveal.tsx

Preview

↓ Scroll down to trigger the reveals

Scroll down to see each direction

↑

↓

down

←

left

→

right

Stagger Reveal

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6