@vueuse/motion

Motion animations composables for Vue 3 — animate elements using spring physics, keyframes, and scroll-linked effects with a simple directive API.

@vueuse/motion

Vue

Motion animations composables for Vue 3 — animate elements using spring physics, keyframes, and scroll-linked effects with a simple directive API.

npm GitHub Docs

Fit

Bundle (gzip)

14.0 kB

37.5 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Adding entrance animations, hover effects, and scroll-triggered reveals in Vue requires either CSS keyframe juggling or heavy animation libraries that don't integrate cleanly with Vue's reactivity system.

What It Does

@vueuse/motion provides a v-motion directive and useMotion composable. You define initial, enter, hover, and focus states as plain objects — the library animates between them using spring physics or custom transitions. It's built on Motion One and integrates naturally with Vue's template syntax.

Installation

bash

npm install @vueuse/motion

Usage Example

vue

<script setup>
import { MotionPlugin } from '@vueuse/motion';
// Register in main.ts: app.use(MotionPlugin)
</script>

<template>
  <div
    v-motion
    :initial="{ opacity: 0, y: 40 }"
    :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
    :hovered="{ scale: 1.05 }"
    class="card"
  >
    Animated Card
  </div>
</template>

Related packages

element-plusVue

A complete component library for Vue 3 with a clean, desktop-oriented design system.

floating-vueVue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

naive-uiVue

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

piniaVue

The intuitive, type-safe, and lightweight state management store for Vue — the official successor to Vuex.

@tanstack/vue-queryVue

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.