AnimatedList

A list container that animates its children in with a staggered entry. Works with any direction and distance, ideal for notification feeds, todos, and timelines.

Interactive Demo

Toggle the list and switch the entry direction.

Direction:

Usage

import { AnimatedList } from "@mantleui/react/motion";

<AnimatedList stagger={0.08} direction="up" distance={24}>
  {items.map((item) => (
    <div key={item.id}>{item.title}</div>
  ))}
</AnimatedList>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Items to render with staggered entry animation.
`stagger`	`number`	`0.1`	Delay in seconds between each child's animation.
`direction`	`"up" \| "down" \| "left" \| "right"`	`"up"`	Direction each item slides from.
`distance`	`number`	`20`	Distance in pixels each item travels on entry.

children

ReactNode

Items to render with staggered entry animation.

stagger0.1

number

Delay in seconds between each child's animation.

direction"up"

"up" | "down" | "left" | "right"

Direction each item slides from.

distance20

number

Distance in pixels each item travels on entry.