build69
build69  /  Components  /  Motion — Transitions & Decorative  /  AnimatedList

AnimatedList

v1.0.3Updated 28 Sept 2026

Staggered-entrance wrapper that runs a motion/react variant on each child. Four animations: fade-up, fade, slide-right, scale — respects prefers-reduced-motion.

View source← Back to catalog

Preview

Live · 11 stories
Fade UpOpen ↗
▸Why this is recommendedanimationliststaggermotion+2

AnimatedList — fade up.

Recommended for+14
  • ✓Activity feed initial paint
  • ✓Notification list reveal
  • ✓Search-result entrance
  • ✓Table-row first paint
Tags+6
animationliststaggermotionentrancefade
Features+4
  • Animations: fade-up / fade / slide-right / scale
  • Configurable stagger + duration + initialDelay
  • motion/react variants under the hood
  • Renders as div / ol / ul
  • Respects prefers-reduced-motion
  • AnimatedListItem named export for composing custom lists
Not recommended for−2
  • ✕Large lists (virtualise + skip animation)
  • ✕Frequently-mounted lists (animation gets distracting)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "AnimatedList" })

Usage

import { AnimatedList } from '@/components/motion/animated-list';

<AnimatedList animation="fade-up" stagger={60} as="ul">
  {items.map(i => <li key={i.id}>{i.label}</li>)}
</AnimatedList>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
animation

Keyframe variant

'fade-up' | 'fade' | 'slide-right' | 'scale'—
stagger

Delay between children in ms

number—
duration

Per-child animation duration in ms

number—
initialDelay

Starting offset in ms

number—
as

Root element

'div' | 'ol' | 'ul'—

Related

Platform docsAll componentsSource files