Scroll Reveal

Live Preview

DEMO COMMING SOON

Video Tutorial YouTube

Setup & Installation Guide

01 Mark your elements

Add data-reveal to any element you want revealed. Works on cards, headings, images — anything.

02 Set initial hidden state in CSS

Set opacity 0 and your desired translate on the element in CSS. GSAP will animate from this state.

03 Register ScrollTrigger and run batch

Load GSAP and the ScrollTrigger plugin, register it, then call ScrollTrigger.batch() once. It targets all matching elements in a single pass.

CDN

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

<section class="reveal-grid">
  <div class="reveal-card" data-reveal>Card 1</div>
  <div class="reveal-card" data-reveal>Card 2</div>
  <div class="reveal-card" data-reveal>Card 3</div>
  <div class="reveal-card" data-reveal>Card 4</div>
  <div class="reveal-card" data-reveal>Card 5</div>
  <div class="reveal-card" data-reveal>Card 6</div>
</section>

.reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 4rem 2rem;
}

.reveal-card {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 2rem;
  min-height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  /* Initial hidden state — GSAP will override this */
  opacity: 0;
  transform: translateY(32px);
}

// Scroll Reveal — GSAP ScrollTrigger.batch()
// Requires GSAP + ScrollTrigger plugin
// <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.batch('[data-reveal]', {
  start: 'top 88%',
  onEnter: (batch) =>
    gsap.to(batch, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      stagger: 0.08,
      ease: 'power2.out',
      overwrite: true,
    }),
  onLeaveBack: (batch) =>
    gsap.to(batch, {
      opacity: 0,
      y: 32,
      duration: 0.4,
      overwrite: true,
    }),
});

Explore More

Custom Cursor

Build a two-part custom cursor — a sharp inner dot and a lagging outer ring — using GSAP quickTo for silky 60fps tracking.

GSAP Interactions Animation

Magnetic Button

Build a cursor-following magnetic button using GSAP quickTo. Drop in a single data attribute and the effect works on any button — no class name changes needed.

GSAP Interactions Animation