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
Images are from cosmos - Impressionisme
Animated Group with custom variants
AnimatedGroup with custom variants
Installation
npx shadcn add "https://motion-primitives.com/c/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' | '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. |