Fade

delay

initialOpacity

opacity

<script setup lang="ts">
import { RepeatIcon } from '@hugeicons/core-free-icons'
import { HugeiconsIcon } from '@hugeicons/vue'
import { Fades } from '@animate-ui/vue/primitives/effects/fade'
import { ref } from 'vue'
import { Button } from '@/components/ui/button'

withDefaults(
  defineProps<{
    delay?: number | string,
    initialOpacity?: number | string,
    opacity?: number | string
  }>(),
  { delay: 0, initialOpacity: 0, opacity: 1 },
)

const ITEMS = ['Design', 'Build', 'Ship']
const run = ref(0)
</script>

<template>
  <div class="flex flex-col items-center gap-6">
    <div :key="`${run}-${delay}-${initialOpacity}-${opacity}`" class="flex gap-3">
      <Fades
        :hold-delay="100"
          :delay="Number(delay)"
          :initial-opacity="Number(initialOpacity)"
          :opacity="Number(opacity)"
      >
        <div
          v-for="item in ITEMS"
          :key="item"
          class="flex h-20 w-24 items-center justify-center rounded-xl bg-accent text-sm font-medium"
        >
          {{ item }}
        </div>
      </Fades>
    </div>
    <Button variant="outline" size="sm" @click="run++">
      <HugeiconsIcon :icon="RepeatIcon" :stroke-width="2" />
      Replay
    </Button>
  </div>
</template>

Installation

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

Usage

<script setup lang="ts">
import { Fade, Fades } from '@animate-ui/vue/primitives/effects/fade';
import Card from './Card.vue';
</script>

<template>
  <Fade>
    <h1>Animated primitives for Vue</h1>
  </Fade>
  <!-- Staggered: each child starts 100ms after the previous one. -->
  <Fades :hold-delay="100">
    <Card />
    <Card />
    <Card />
  </Fades>
</template>

With as-child, the animation is applied to your element instead of a wrapping div.

Animation

The element fades from initial-opacity to opacity on a spring (stiffness 200, damping 20): about 250ms.
Only opacity animates, so it stays the same under reduced motion.
in-view waits for the element to scroll into view, once by default.
<AnimateUIProvider :tempo> paces the default spring.

API Reference

Prop	Type	Default
`as-child?`	`boolean`	`false`
`initial-opacity?`	`number`	`0`
`opacity?`	`number`	`1`
`delay?`	`number`	`0`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 200, damping: 20 }`
`in-view?`	`boolean`	`false`
`in-view-once?`	`boolean`	`true`
`in-view-margin?`	`string`	`'0px'`
`...props?`	`HTMLMotionProps<'div'>`	-

Fades

Wraps each child in a Fade, delaying each one a little more than the previous.

Prop	Type	Default
`#default`	`slot`	-
`hold-delay?`	`number`	`0`
`...props?`	`FadeProps`	-

Fade

InstallationCopy Anchor Link

UsageCopy Anchor Link

AnimationCopy Anchor Link

API ReferenceCopy Anchor Link

FadeCopy Anchor Link

FadesCopy Anchor Link

Installation

Usage

Animation

API Reference

Fade

Fades