Animated List

Animated list with animated items

animated-list-tw

JS
John Smith
Liked your post about React performance
2 minutes ago
EM
Emma Martinez
Commented on your repository
5 minutes ago
AJ
Alex Johnson
Started following you
12 minutes ago
SK
Sarah Kim
Mentioned you in a comment
18 minutes ago
MB
Michael Brown
Shared your article
25 minutes ago

Customize

Duration

0.4

Item Gap

Swipe to DismissFade Edges

Fade Edge Size

Auto Add

Auto Add Delay (ms)

2000

Max Items

Pause on Hover

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

itemsAnimatedListItem[]

Array of items to display with id and content

Default[]

durationnumber

Duration of item animation in seconds

Default0.4

easing[number, number, number, number]

Animation easing function as cubic bezier values

Default[0.25, 0.46, 0.45, 0.94]

autoAddDelaynumber

Delay between auto-adding items in ms (0 to disable)

Default2000

maxItemsnumber

Maximum number of items to display

Default10

startFrom"top" | "center" | "bottom"

Starting position of list items

Default"center"

animationType"slide" | "fade" | "scale" | "bounce" | "blur"

Type of entrance animation for items

Default"slide"

enterFrom"top" | "bottom" | "left" | "right"

Direction items enter from

Default"top"

pauseOnHoverboolean

Pause auto-adding when user hovers over the list

Defaultfalse

hoverEffect"none" | "scale"

Effect when hovering over items

Default"none"

clickEffect"none" | "ripple" | "press"

Effect when clicking items

Default"none"

fadeEdgesboolean

Enable smooth fade at top/bottom edges

Defaulttrue

fadeEdgeSizenumber

Size of fade edges in pixels

Default80

fadeColorstring

Background color for fade edges

Default"#0a0a0a"

swipeToDismissboolean

Enable swiping items to dismiss them

Defaultfalse

onDismiss(item: AnimatedListItem) => void

Callback when an item is dismissed via swipe

Defaultundefined

onItemClick(item: AnimatedListItem) => void

Callback function when an item is clicked

Defaultundefined

itemGapnumber

Gap between items in pixels

Default12

classNamestring

Additional CSS classes

Default""

renderItem(item: AnimatedListItem) => ReactNode

Custom item render function

Defaultundefined

heightstring | number

Height of the container

Default"600px"