Animated List

A live feed where new items animate into the list

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"

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