AnimationsScroll Reveal

Scroll Reveal

Reveal copy blocks progressively as the user scrolls down the page, using GSAP for smooth motion and IntersectionObserver for efficient triggering.

Installation

$ npx @nehal712521/inprogress add scroll-reveal

Requires: gsap

Preview

Scroll inside this panel; the lines of text will fade and lift into place as they enter the viewport.

Youcanstackmultipleblockstocreatenarrativeflows.

Perfectformarketingpages,featurebreakdowns,andcasestudies.

Bringattentiontokeyideasrightwhentheyappearonscreen.

Usage

Wrap your copy in ScrollReveal and pass an array of lines. Each line is animated independently when it crosses the viewport threshold.

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

export default function Page() {
  return (
    <main className="min-h-screen bg-black text-white">
      <section className="max-w-3xl mx-auto py-24 space-y-24">
        <ScrollReveal
          lines={[
            "Build beautiful sections that reveal as you scroll.",
            "Each line animates in with a soft upward motion.",
            "Powered by GSAP and IntersectionObserver.",
          ]}
          className="space-y-6"
          lineClassName="text-2xl md:text-3xl font-semibold text-zinc-50"
        />
      </section>
    </main>
  );
}