Stagger Scroll Batch

ScrollTrigger.batch stagger on enter and leave.

Scroll down to reveal the grid

Installation

Requires MotionProvider and gsap. Add the stagger scroll batch component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/stagger-scroll-batch.json

Usage

import { StaggerScrollBatch } from "@/void/scroll/stagger-scroll-batch"

<StaggerScrollBatch once className="grid gap-4 sm:grid-cols-3">
  {items.map((item) => (
    <Card key={item.id}>{item.title}</Card>
  ))}
</StaggerScrollBatch>

Examples

Default

Scroll down to reveal the grid

Code

import { StaggerScrollBatch } from "@/void/scroll/stagger-scroll-batch"

<StaggerScrollBatch once className="grid gap-4 sm:grid-cols-3">
  {items.map((item) => (
    <Card key={item.id}>{item.title}</Card>
  ))}
</StaggerScrollBatch>