Motion

1---2name: motion3description: Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt4license: MIT5---6 7# Motion Vue (motion-v)8 9Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size.10 11**Current stable:** motion-v 1.x - Vue port of Motion (formerly Framer Motion)12 13## Overview14 15Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file).16 17## When to Use18 19**Use Motion Vue for:**20 21- Simple declarative animations (fade, slide, scale)22- Gesture-based interactions (hover, tap, drag)23- Scroll-linked animations24- Layout animations and shared element transitions25- Spring physics animations26 27**Consider alternatives:**28 29- **GSAP** - Complex timelines, SVG morphing, scroll-triggered sequences30- **@vueuse/motion** - Simpler API, less features, smaller bundle31- **CSS animations** - Simple transitions without JS32 33## Installation34 35```bash36# Vue 337pnpm add motion-v38 39# Nuxt 340pnpm add motion-v @vueuse/nuxt41```42 43```ts44// nuxt.config.ts - Nuxt 3 setup45export default defineNuxtConfig({46  modules: ['motion-v/nuxt'],47})48```49 50## Quick Reference51 52| Working on...                | Load file                 |53| ---------------------------- | ------------------------- |54| Motion component, gestures   | references/components.md  |55| useMotionValue, useScroll    | references/composables.md |56| Animation examples, patterns | references/examples.md    |57 58## Loading Files59 60**Consider loading these reference files based on your task:**61 62- [ ] [references/components.md](references/components.md) - if using Motion component, gestures, or layout animations63- [ ] [references/composables.md](references/composables.md) - if using useMotionValue, useScroll, useSpring, or animate()64- [ ] [references/examples.md](references/examples.md) - if looking for animation patterns or inspiration65 66**DO NOT load all files at once.** Load only what's relevant to your current task.67 68## Core Concepts69 70### Motion Component71 72Render any HTML/SVG element with animation capabilities:73 74```vue75<script setup lang="ts">76import { motion } from 'motion-v'77</script>78 79<template>80  <motion.div81    :initial="{ opacity: 0, y: 20 }"82    :animate="{ opacity: 1, y: 0 }"83    :exit="{ opacity: 0, y: -20 }"84    :transition="{ duration: 0.3 }"85  >86    Animated content87  </motion.div>88</template>89```90 91### Gesture Animations92 93```vue94<motion.button95  :whileHover="{ scale: 1.05 }"96  :whilePress="{ scale: 0.95 }"97  :transition="{ type: 'spring', stiffness: 400 }"98>99  Click me100</motion.button>101```102 103### Scroll Animations104 105```vue106<motion.div107  :initial="{ opacity: 0 }"108  :whileInView="{ opacity: 1 }"109  :viewport="{ once: true, margin: '-100px' }"110>111  Appears on scroll112</motion.div>113```114 115## Available Guidance116 117**[references/components.md](references/components.md)** - Motion component variants, animation props, gesture props, layout animations, transition configuration118 119**[references/composables.md](references/composables.md)** - useMotionValue, useSpring, useTransform, useScroll, useInView, animate()120 121**[references/examples.md](references/examples.md)** - External resources, component libraries, animation patterns and inspiration