Docs
Animated List
Animated List
A sophisticated animation component that creates dynamic column-based transitions with scaling effects. Perfect for showcasing notifications, messages, or any sequential content with smooth formation, scrolling, and reset animations.
Location2h ago
Thomas has arrived home
Fitness Tracker1h ago
You've reached your daily step goal!
Calendar45m ago
Meeting with team in 30 minutes
Task Manager1d ago
3 tasks due today
Health3h ago
Your heart rate is elevated.
Email5m ago
New message from your manager
TikTok2d ago
Your video got 1000 likes!
Grandpa1w ago
How are you doing, my dear?
Clara2d ago
Let's meet for coffee tomorrow!
Sarah4h ago
Did you see the new movie?Location2h ago
Thomas has arrived homeFitness Tracker1h ago
You've reached your daily step goal!Calendar45m ago
Meeting with team in 30 minutesTask Manager1d ago
3 tasks due todayHealth3h ago
Your heart rate is elevated.Email5m ago
New message from your managerTikTok2d ago
Your video got 1000 likes!Grandpa1w ago
How are you doing, my dear?Clara2d ago
Let's meet for coffee tomorrow!Sarah4h ago
Did you see the new movie?Installation
Usage
import { AnimatedList } from "@/components/ui/animated-list";<AnimatedList>
{notifications.map((notification) => (
<Notification key={notification.id} notification={notification} />
))}
</AnimatedList>Props
animated-list props.
| Prop | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | The content to be displayed in the animated list. | - |
| className | string | Additional CSS classes for custom styling. | - |
| stackGap | number | Vertical spacing between items in the initial stack formation. | 20 |
| columnGap | number | Vertical spacing between items in the column formation. | 85 |
| scaleFactor | number | Factor used to scale items in the initial stack formation. | 0.05 |
| scrollDownDuration | number | Duration of the scroll down animation in seconds. | 5 |
| formationDuration | number | Duration of the column formation animation in seconds. | 1 |
animated-list-item props.
| Prop | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | The content of the list item. | - |
| className | string | Additional CSS classes for custom styling. | - |
| index | number | The position of the item in the list. | - |
| listLength | number | The total number of items in the list. | - |
| stackGap | number | Vertical spacing between items in the initial stack formation. | 10 |
| columnGap | number | Vertical spacing between items in the column formation. | 100 |
| scaleFactor | number | Factor used to scale items in the initial stack formation. | 0.1 |
| formationDuration | number | Duration of the column formation animation in seconds. | 1 |
| visibleItemsCount | number | Number of items visible in the initial stack. | 4 |
| resetSpringStiffness | number | Spring animation stiffness for reset animation. | 120 |
| resetSpringDamping | number | Spring animation damping for reset animation. | 20 |