Skip to main content
Motion provides a first-class Vue integration with the same powerful animation capabilities available in React and vanilla JavaScript.

​
Installation

npm install motion-v

​
Quick Start

Import the motion component from motion-v and use it like any other Vue component: 
<script setup>
import { motion } from "motion-v"
</script>

<template>
  <motion.div :animate="{ x: 100 }" />
</template>

​
Features

Motion for Vue includes all the core Motion features:
  • Declarative animations - Animate elements with simple props
  • Spring physics - Natural, physics-based motion
  • Gestures - Built-in drag, hover, tap, and focus interactions
  • Layout animations - Automatic animations when layout changes
  • Scroll animations - Link animations to scroll position
  • GPU acceleration - Hardware-accelerated animations for smooth 60fps+ performance

​
API Compatibility

The Vue integration closely mirrors the React API, with Vue-specific conventions:
  • Props use Vue’s :prop syntax for reactive bindings
  • Events use Vue’s @event syntax
  • Refs work with Vue’s ref() API

​
Component Types

Motion components are available for all HTML and SVG elements: 
<motion.div />      <!-- HTML elements -->
<motion.button />
<motion.section />

<motion.svg />      <!-- SVG elements -->
<motion.circle />
<motion.path />

​
Core Concepts

​
Animate Prop

The animate prop defines the target animation state: 
<motion.div 
  :animate="{ 
    x: 100, 
    opacity: 1,
    rotate: 45 
  }" 
/>

​
Initial Prop

Set the initial state before animation: 
<motion.div 
  :initial="{ opacity: 0, scale: 0.8 }"
  :animate="{ opacity: 1, scale: 1 }"
/>

​
Transition Prop

Control animation timing and behavior: 
<motion.div 
  :animate="{ x: 100 }"
  :transition="{ 
    duration: 0.5, 
    ease: 'easeOut' 
  }"
/>

​
Reactive Animations

Motion automatically responds to reactive data changes: 
<script setup>
import { ref } from 'vue'
import { motion } from 'motion-v'

const x = ref(0)
const toggle = () => {
  x.value = x.value === 0 ? 100 : 0
}
</script>

<template>
  <motion.div 
    :animate="{ x: x }" 
    @click="toggle"
  >
    Click me
  </motion.div>
</template>

​
Next Steps

Getting Started

Set up your first Vue Motion project

Spring Animations

Create natural, physics-based animations

Gestures

Add drag and gesture interactions

Performance

Optimize for smooth 60fps animations

Build docs developers (and LLMs) love

Get started for freeTalk to us