Slide

An entrance that slides elements into place on load or when they scroll into view.

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

withDefaults(
  defineProps<{
    delay?: number | string,
    direction?: 'up' | 'down' | 'left' | 'right',
    offset?: number | string
  }>(),
  { delay: 0, direction: 'up', offset: 100 },
)

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

<template>
  <div class="flex flex-col items-center gap-6">
    <div :key="`${run}-${delay}-${direction}-${offset}`" class="flex gap-3">
      <Slides
        :hold-delay="100"
          :delay="Number(delay)"
          :direction="direction"
          :offset="Number(offset)"
      >
        <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>
      </Slides>
    </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 { Slide, Slides } from '@animate-ui/vue/primitives/effects/slide';
import Card from './Card.vue';
</script>

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

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

Animation

  • The element travels offset pixels (100 by default) into place on a spring (stiffness 200, damping 20), overshooting by about 4% before it settles. It moves with x / y, a hardware-accelerated transform.
  • direction is the direction it moves in: up starts below its place.
  • Under reduced motion, it doesn't travel: it fades in instead.
  • in-view waits for the element to scroll into view, once by default.
  • <AnimateUIProvider :tempo> paces the default spring.

API Reference

Slide

PropTypeDefault
as-child?
booleanfalse
direction?
'up' | 'down' | 'left' | 'right''up'
offset?
number100
delay?
number0
transition?
Transition{ type: 'spring', stiffness: 200, damping: 20 }
in-view?
booleanfalse
in-view-once?
booleantrue
in-view-margin?
string'0px'
...props?
HTMLMotionProps<'div'>-

Slides

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

PropTypeDefault
#default
slot-
hold-delay?
number0
...props?
SlideProps-

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/23/2026

On this page

InstallationUsageAnimationAPI ReferenceSlideSlides