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

Tweak the props live

Animation

Animation Type

Enter From

Start From

Duration0.4

Item Gap12

Effects & Interaction

Hover Effect

Click Effect

Swipe to Dismiss

Fade Edges

Fade Edge Size80

Auto Add & List

Auto Add

Auto Add Delay (ms)2000

Max Items10

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

Default:0.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)

Default:2000

maxItemsnumber

Maximum number of items to display

Default:10

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

Default:false

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

Default:true

fadeEdgeSizenumber

Size of fade edges in pixels

Default:80

fadeColorstring

Background color for fade edges

Default:"#0a0a0a"

swipeToDismissboolean

Enable swiping items to dismiss them

Default:false

onDismiss(item: AnimatedListItem) => void

Callback when an item is dismissed via swipe

Default:undefined

onItemClick(item: AnimatedListItem) => void

Callback function when an item is clicked

Default:undefined

itemGapnumber

Gap between items in pixels

Default:12

classNamestring

Additional CSS classes

Default:""

renderItem(item: AnimatedListItem) => ReactNode

Custom item render function

Default:undefined

heightstring | number

Height of the container

Default:"600px"