Premium Animated List

Animated list

Wrap the feed in AnimatedList and each row in AnimatedListItem — the stagger, perspective and hover spotlight come with it.

SetstaggerDelay={0.15}

to the gap in seconds between one child starting and the next.

Flip

Usevariant="flip"

to rotate each row in on the X axis against the container's 3D perspective — the signature entrance.

Slide up

Usevariant="slide-up"

to translate the rows in from an edge instead of rotating. slide-left and slide-right do the same from the sides.

Pop

Usevariant="pop"

to scale each row in from small.

ease="elastic.out(1, 0.5)"

adds the overshoot that makes the pop bounce.

Timing

staggerDelay={0.35}

is the gap between children.

duration={1.1}

is how long each one takes.

animationDelay={0.3}

is how long the whole sequence waits before starting.

ease="power4.out"

takes any GSAP-style ease name — no GSAP needed.