Back to Dictionary
Page & View Transitions
●●○Customize
Stagger List Reveal
When opening a dropdown menu or a list, the items appear sequentially from top to bottom, drawing the eye down the list.
Live Demo
What It Is
When opening a dropdown menu or a list, the items appear sequentially from top to bottom, drawing the eye down the list.
✓When to Use
- Dropdown menus (Context menues, Select boxes)
- Sidebar navigation items loading
- Command palettes (Comboboxes)
✕When NOT to Use
- Lists with more than 10 items (takes too long)
- Data-heavy tables
Configuration Tips
- 01Keep the stagger delay extremely short (0.03s - 0.05s) to stay snappy
- 02Items should translate from y: -10px to y: 0 to feel like they are unrolling
You've Seen It In
Linear Command PaletteRadix UI PrimitivesVercel Navbar
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Make the items in this dropdown menu cascade in one by one from top to bottom really fast.
Code Example (Tailwind CSS)
export function StaggerListRevealDemo() {}