Animated List

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Customize AnimatedList

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Props

PropertyTypeDefaultDescription
itemsstring[]['Item 1', 'Item 2', 'Item 3', ...]Array of items to display in the list.
onItemSelect(item: string, index: number) => void-Callback function when an item is selected.
showGradientsbooleantrueShow gradient overlays at top and bottom of scrollable list.
enableArrowNavigationbooleantrueEnable keyboard navigation with arrow keys and tab.
classNamestring""Additional CSS classes for the container.
itemClassNamestring""Additional CSS classes for individual items.
displayScrollbarbooleantrueShow or hide the scrollbar.
initialSelectedIndexnumber-1Initial selected item index (-1 for no selection).

Dependencies

motion

Created with ❤️ by Cybershoora