scroll

StaggerGroup

Stagger children with a shared preset.

Playground

presetgapdurationitems

Scroll-based previews need you to scroll into view.

Live preview

Code

<StaggerGroup preset="slideUp" gap={0.12} duration={0.7} className="flex gap-2">
  {Array.from({ length: 3 }).map((_, i) => (
    <div key={i} className="h-16 flex-1 rounded-lg bg-muted" />
  ))}
</StaggerGroup>

Props

Prop	Type	Default	Description
preset	string	slideUp	Per-child entrance preset
gap	number	0.08	Stagger delay between children (seconds)
duration	number	—	Tween duration override