Motion Vue (motion-v)

Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size.

Current stable: motion-v 1.x - Vue port of Motion (formerly Framer Motion)

Overview

Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file).

When to Use

Use Motion Vue for:

• Simple declarative animations (fade, slide, scale)
• Gesture-based interactions (hover, tap, drag)
• Scroll-linked animations
• Layout animations and shared element transitions
• Spring physics animations

Consider alternatives:

• GSAP - Complex timelines, SVG morphing, scroll-triggered sequences
• @vueuse/motion - Simpler API, less features, smaller bundle
• CSS animations - Simple transitions without JS

Installation

bash
1# Vue 3
2pnpm add motion-v
3
4# Nuxt 3
5pnpm add motion-v @vueuse/nuxt

ts
1// nuxt.config.ts - Nuxt 3 setup
2export default defineNuxtConfig({
3  modules: ['motion-v/nuxt'],
4})

Quick Reference

Loading Files

Consider loading these reference files based on your task:

• references/components.md - if using Motion component, gestures, or layout animations
• references/composables.md - if using useMotionValue, useScroll, useSpring, or animate()
• references/examples.md - if looking for animation patterns or inspiration

DO NOT load all files at once. Load only what's relevant to your current task.

Core Concepts

Motion Component

Render any HTML/SVG element with animation capabilities:

vue
1<script setup lang="ts">
2import { motion } from 'motion-v'
3</script>
4
5<template>
6  <motion.div
7    :initial="{ opacity: 0, y: 20 }"
8    :animate="{ opacity: 1, y: 0 }"
9    :exit="{ opacity: 0, y: -20 }"
10    :transition="{ duration: 0.3 }"
11  >
12    Animated content
13  </motion.div>
14</template>

Gesture Animations

vue
1<motion.button
2  :whileHover="{ scale: 1.05 }"
3  :whilePress="{ scale: 0.95 }"
4  :transition="{ type: 'spring', stiffness: 400 }"
5>
6  Click me
7</motion.button>

Scroll Animations

vue
1<motion.div
2  :initial="{ opacity: 0 }"
3  :whileInView="{ opacity: 1 }"
4  :viewport="{ once: true, margin: '-100px' }"
5>
6  Appears on scroll
7</motion.div>

Available Guidance

references/components.md - Motion component variants, animation props, gesture props, layout animations, transition configuration

references/composables.md - useMotionValue, useSpring, useTransform, useScroll, useInView, animate()

references/examples.md - External resources, component libraries, animation patterns and inspiration