Components
Animated Group
Animate multiple elements in sequence with staggered delays.
Animated Group
The AnimatedGroup component allows you to animate multiple elements in sequence with staggered delays. It's perfect for creating cascading animations, loading sequences, and other staggered effects.
Usage
Basic Animated Group
Items animate in sequence with staggered delays
1
2
3
4
5
6
<template>
<MAnimatedGroup
:stagger-children="0.1"
:variants="{
item: {
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 }
}
}"
>
<div
v-for="i in 6"
:key="i"
class="h-12 w-12 rounded-lg bg-primary flex items-center justify-center text-white font-bold"
>
{{ i }}
</div>
</MAnimatedGroup>
</template>
Props
as
string
HTML element to render as the container.
asChild
string
HTML element to render as each child item.
class
string
CSS classes to apply to the container.
variants
object
Animation variants for container and items.
preset
string
Predefined animation presets ('fade', 'slide', 'scale', 'blur', 'blur-slide', 'zoom', 'flip', 'bounce', 'rotate', 'swing').
initial
string
Initial animation state.
animate
string
Target animation state.
staggerChildren
number
Delay between each child animation in seconds.
staggerDirection
number
Direction of stagger (1 for forward, -1 for reverse).
Examples
With Preset Animation
Preset Animation
Using built-in animation presets
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
<template>
<MAnimatedGroup
preset="bounce"
:stagger-children="0.05"
>
<UBadge
v-for="i in 8"
:key="i"
color="primary"
variant="solid"
size="lg"
>
Item {{ i }}
</UBadge>
</MAnimatedGroup>
</template>
With Custom Duration
Custom Duration
Custom animation timing and easing
1
2
3
4
5
6
7
8
<template>
<MAnimatedGroup
:stagger-children="0.15"
:variants="{
item: {
hidden: { opacity: 0, scale: 0.8 },
visible: {
opacity: 1,
scale: 1,
transition: {
duration: 0.8,
ease: 'easeInOut'
}
}
}
}"
>
<div
v-for="i in 8"
:key="i"
class="h-10 w-10 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-center text-white font-bold"
>
{{ i }}
</div>
</MAnimatedGroup>
</template>