0%

scroll

StaggerScrollBatch

ScrollTrigger.batch stagger on enter/leave. Source: GSAP docs — https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()

Playground

Scroll-based previews need you to scroll into view.

Live preview

Scroll — items batch in as they enter the lane

Code

<StaggerScrollBatch stagger={0.15} className="grid grid-cols-3 gap-2">
  {Array.from({ length: 6 }).map((_, i) => (
    <div key={i} className="h-14 rounded-lg bg-muted" />
  ))}
</StaggerScrollBatch>

Props

PropTypeDefaultDescription
staggernumber0.15Stagger between batched elements
yFromnumber48Initial y offset before reveal