Animated Group

A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.

Examples

Animated Group with preset

Morning tideOil on linen

Orchard in MayGouache

Harbour lightsInk on paper

Quiet streetCharcoal

Animated Group with custom variants

Morning tideOil on linen

Orchard in MayGouache

Harbour lightsInk on paper

Quiet streetCharcoal

AnimatedGroup with custom variants

Halden

Quillstone

Tidewell

Ashgrove

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-animated-group.json

Component API

AnimatedGroup

Prop	Type	Default	Description
children	ReactNode		The child elements to be animated.
className	string	undefined	Optional CSS class for styling the component.
variants	`{ container?: Variants; item?: Variants; }`	undefined	Custom variants for container and item animations.
preset	'fade' \| 'slide' \| 'scale' \| 'blur-sm' \| 'blur-slide'	undefined	Preset animations to apply to the group of elements.
as	React.ElementType	'div'	The HTML element to render the component as.
asChild	React.ElementType	'div'	The HTML element to render the child elements as.