Layout

Animated Group

Animate multiple elements in sequence with staggered delays.

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

<template>
  <div class="p-6 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-xl max-w-md mx-auto">
    <div class="text-center mb-6">
      <h3 class="text-xl font-bold text-highlighted mb-2">
        Basic Animated Group
      </h3>
      <p class="text-muted text-sm">
        Items animate in sequence with staggered delays
      </p>
    </div>

    <div class="bg-default rounded-lg p-6 shadow">
      <MAnimatedGroup
        :stagger-children="0.1"
        :variants="{
          item: {
            hidden: { opacity: 0, y: 20 },
            visible: { opacity: 1, y: 0 },
          },
        }"
        class="flex flex-wrap gap-2"
      >
        <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 m-1"
        >
          {{ i }}
        </div>
      </MAnimatedGroup>
    </div>

    <div class="mt-4 text-center">
      <UButton
        color="primary"
        variant="outline"
        size="sm"
        class="flex items-center mx-auto"
        @click="refresh"
      >
        <UIcon
          name="i-lucide-refresh-cw"
          class="w-4 h-4 mr-1"
        />
        Refresh Animation
      </UButton>
    </div>
  </div>
</template>

<script setup>
const refresh = () => {
  // This will trigger a re-render and restart the animation
  window.location.reload()
}
</script>

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>
  <div class="p-6 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-xl max-w-md mx-auto">
    <div class="text-center mb-6">
      <h3 class="text-xl font-bold text-highlighted mb-2">
        Preset Animation
      </h3>
      <p class="text-muted text-sm">
        Using built-in animation presets
      </p>
    </div>

    <div class="bg-default rounded-lg p-6 shadow">
      <MAnimatedGroup
        :key="currentPreset"
        :preset="currentPreset"
        :stagger-children="0.05"
        class="flex flex-wrap gap-2"
      >
        <UBadge
          v-for="i in 8"
          :key="i"
          color="primary"
          variant="solid"
          size="lg"
          class="m-1 inline-block"
        >
          Item {{ i }}
        </UBadge>
      </MAnimatedGroup>
    </div>

    <div class="mt-4 flex justify-center gap-3">
      <UButton
        :color="currentPreset === 'bounce' ? 'primary' : 'gray'"
        size="xs"
        @click="changePreset('bounce')"
      >
        Bounce
      </UButton>
      <UButton
        :color="currentPreset === 'slide' ? 'primary' : 'gray'"
        size="xs"
        @click="changePreset('slide')"
      >
        Slide
      </UButton>
      <UButton
        :color="currentPreset === 'scale' ? 'primary' : 'gray'"
        size="xs"
        @click="changePreset('scale')"
      >
        Scale
      </UButton>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentPreset = ref('bounce')

const changePreset = (preset) => {
  currentPreset.value = preset
}
</script>

Customize

Variants

Preset

Asdiv

As Childdiv

Initialhidden

Animatevisible

Stagger Children0.1

Stagger Direction1

Stagger Fromstart

Props

Prop	Type	Default	Description
`as`	`string`	`'div'`	HTML element to render as the container.
`asChild`	`string`	`'div'`	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`	`'hidden'`	Initial animation state.
`animate`	`string`	`'visible'`	Target animation state.
`staggerChildren`	`number`	`0.1`	Delay between each child animation in seconds.
`staggerDirection`	`number`	`1`	Direction of stagger (1 for forward, -1 for reverse).

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.animatedGroup in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-

Edit this pageorReport an issue

Android

A CSS phone frame with a punch-hole camera instead of a dynamic island.

Breakpoint Indicator

A development badge that names the active Tailwind breakpoint and shows the live viewport size.