Animated List
Animated list with animated items
animated-list-tw
Customize
0.4
12
2000
10
80
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | AnimatedListItem[] | [] | Array of items to display with id and content |
| duration | number | 0.4 | Duration of item animation in seconds |
| easing | [number, number, number, number] | [0.25, 0.46, 0.45, 0.94] | Animation easing function as cubic bezier values |
| autoAddDelay | number | 2000 | Delay between auto-adding items in ms (0 to disable) |
| maxItems | number | 10 | Maximum number of items to display |
| startFrom | "top" | "center" | "bottom" | "center" | Starting position of list items |
| animationType | "slide" | "fade" | "scale" | "bounce" | "blur" | "slide" | Type of entrance animation for items |
| enterFrom | "top" | "bottom" | "left" | "right" | "top" | Direction items enter from |
| pauseOnHover | boolean | false | Pause auto-adding when user hovers over the list |
| hoverEffect | "none" | "scale" | "none" | Effect when hovering over items |
| clickEffect | "none" | "ripple" | "press" | "none" | Effect when clicking items |
| fadeEdges | boolean | true | Enable smooth fade at top/bottom edges |
| fadeEdgeSize | number | 80 | Size of fade edges in pixels |
| fadeColor | string | "#0a0a0a" | Background color for fade edges |
| swipeToDismiss | boolean | false | Enable swiping items to dismiss them |
| onDismiss | (item: AnimatedListItem) => void | undefined | Callback when an item is dismissed via swipe |
| onItemClick | (item: AnimatedListItem) => void | undefined | Callback function when an item is clicked |
| itemGap | number | 12 | Gap between items in pixels |
| className | string | "" | Additional CSS classes |
| renderItem | (item: AnimatedListItem) => ReactNode | undefined | Custom item render function |
| height | string | number | "600px" | Height of the container |