Stagger

Brings the children of a list or a grid in one after the other.

Dependenciesmotion

Lina MoreauDesign

Marc DuboisEngineering

Sofia RossiProduct

Noah WeberSupport

Installation#

pnpm dlx shadcn@latest add @balick/stagger

Or pass the full URL: https://ui.balick.me/r/stagger.json

Usage#

import { Stagger } from "@/components/ui/stagger"

export function Team({ people }: { people: string[] }) {
  return (
    <Stagger className="grid gap-3 sm:grid-cols-2" interval={0.1} inView>
      {people.map((person) => (
        <div key={person} className="rounded-lg border p-4">
          {person}
        </div>
      ))}
    </Stagger>
  )
}

Props#

Prop	Type	Default	Description
`interval` Delay between two children, in seconds.	`number`	0.08	Delay between two children, in seconds.
`delay` Delay before the first child, in seconds.	`number`	0	Delay before the first child, in seconds.
`duration` Duration of each child's entrance, in seconds.	`number`	0.45	Duration of each child's entrance, in seconds.
`offset` Distance travelled by each child, in pixels.	`number`	12	Distance travelled by each child, in pixels.
`direction` Direction the children come from.	`"up" \| "down" \| "left" \| "right"`	"up"	Direction the children come from.
`inView` Wait until the group scrolls into view before animating.	`boolean`	false	Wait until the group scrolls into view before animating.
`inViewMargin` Margin applied to the viewport when inView is set.	`string`	"-50px"	Margin applied to the viewport when inView is set.
`itemClassName` Class name of the wrapper around each child. Every direct child is wrapped in a div.	`string`	—	Class name of the wrapper around each child. Every direct child is wrapped in a div.