AnimatedList
animated-listReveals child items sequentially with fade-and-rise motion on viewport entry.
Usage
Basic usage
The sub-items fade in and move up into the field one by one, and are triggered when entering the viewport (once).
New Order¥128 · Just now
Payment successful¥99 · 1 minute ago
New review★★★★★ · 3 minutes ago
New Follower@hulian · 5 minutes ago
tsx
<AnimatedList>
<Row t="New Order" d="¥128 · Just" />
<Row t="Payment successful" d="¥99 · 1 minute ago" />
<Row t="New review" d="★★★★★ · 3 minutes ago" />
<Row t="New Fan" d="@hulian · 5 minutes ago" />
</AnimatedList>Adjust the entry interval (stagger)
stagger Controls the delay (seconds) for adjacent sub-items to enter. The larger the delay, the more "staggered" it is.
New Order¥128 · Just now
Payment successful¥99 · 1 minute ago
New review★★★★★ · 3 minutes ago
tsx
<AnimatedList stagger={0.4}>
<Row t="New Order" d="¥128 · Just" />
<Row t="Payment successful" d="¥99 · 1 minute ago" />
<Row t="New review" d="★★★★★ · 3 minutes ago" />
</AnimatedList>When to use
Use AnimatedList to give notifications, feeds, or feature rows a staggered entrance. Prefer a static list when the animation adds no value. Use Sortable when users need to reorder items.
Import
ts
import { AnimatedList } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| stagger | number | 0.15 | Delay between adjacent entries in seconds. |
| className | string | — | Container class name. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Entries animated in render order. |
Example
tsx
<AnimatedList className="w-72">
<Row t="New order" d="$128 · just now" />
<Row t="Payment received" d="$99 · 1 minute ago" />
<Row t="New review" d="★★★★★ · 3 minutes ago" />
</AnimatedList>Usage notes
- Viewport entry is client-side. Offscreen children remain initially hidden, so use care for SSR-critical first-screen content.
- Dynamic insertion changes stagger order; every child needs a stable key.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable