# Stagger List

> Rise + fade list items in one after another on load, staggered by order. Use for short, above-the-fold lists, menus, or nav. Honors prefers-reduced-motion. For long or off-screen lists use scroll-reveal instead; never gate must-scan content on the animation.

- Skill: `xpert-ai/stagger-list` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/stagger-list`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/stagger-list/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/stagger-list

---


# stagger-list

List items rise + fade in, one after another. Part of
[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.

## When to use it
- Short above-the-fold lists, menus, nav items, or a dropdown opening.

## When NOT to use it (restraint)
- Long / off-screen lists — use `scroll-reveal`. Keep the whole sequence under ~600ms.

## How to apply
1. Copy `stagger-list.css` and `stagger-list.js` and link them.
2. Wrap items: `<ul data-stagger>…</ul>` (optional `data-stagger-step="70"`).

## Accessibility & performance
- `prefers-reduced-motion`: shown immediately. Transform/opacity only.