motion-v (Motion for Vue) 2.4.4

Motion for Vue is the Vue port of Motion (formerly Framer Motion). It animates DOM and SVG through props, motion values, and a hybrid engine.

Facts, all verified from the prepared source:

Package: motion-v 2.4.4, MIT, ESM only (package.json:4, package.json:20-33).
Peer deps: vue >= 3.0.0, @vueuse/core >= 10.0.0 (package.json:53-56).
Engine deps: framer-motion, motion-dom, motion-utils, all ^13.3.0 (package.json:57-62).
Entry points: motion-v, motion-v/nuxt, motion-v/resolver (package.json:20-33).
The root entry re-exports all of framer-motion/dom (dist/es/index.d.ts:1). So animate, stagger, arc, easing functions, and more come from the Motion engine.
Repo and docs: https://github.com/motiondivision/motion-vue, https://motion.dev/docs/vue

Quick start

npm install motion-v

<script setup>
import { motion } from 'motion-v'
</script>

<template>
  <motion.div :initial="{ opacity: 0 }" :animate="{ opacity: 1, x: 100 }" />
</template>

motion is a namespace of typed components for every HTML and SVG tag (dist/es/components/motion/index.d.ts:3-182). motion.div, motion.svg, motion.path and so on.

Core model

Set initial, animate, exit, whileHover, whilePress, whileInView, whileFocus, whileDrag to values or variant labels.
When animate values change, the element animates to them.
transition configures timing, spring, delay, stagger.
variants plus custom support dynamic, per element targets.
Animatable values include independent transforms (x, y, scale, rotate, skewX), colors, and CSS variables (dist/es/types/state.d.ts:45-47).
In templates, bind motion props with : prefix. They are props, not attributes.

Full prop and hook listing: references/api-surface.md

Hard rules

These rules prevent the most common bugs. Each cites its source.

Use m plus LazyMotion instead of motion when bundle size matters. motion ships all features, about 34 kb. m starts near 6 kb. Load domAnimation for variants, gestures, exit. Load domMax for drag and layout. Set strict to catch stray motion usage in dev. https://motion.dev/docs/vue-lazymotion, dist/es/components/lazy-motion/index.d.ts:4-13
Never put v-if on AnimatePresence itself. If it unmounts, it cannot intercept child exits. Put the condition on the direct child instead:
```
<AnimatePresence>
  <motion.div v-if="isVisible" :exit="{ opacity: 0 }" />
</AnimatePresence>
```
https://motion.dev/docs/vue-animate-presence
For layout animations, apply changing CSS to :style, never to :animate. The layout prop animates the measured change. Values in :animate fight the FLIP measurement. https://motion.dev/docs/vue-layout-animations
Set borderRadius and boxShadow as inline styles on layout elements. Motion corrects scale distortion for these two only when they are motion values in :style. https://motion.dev/docs/vue-layout-animations#scale-correction
Add layoutScroll on scrollable ancestors and layoutRoot on fixed position ancestors. Without them, layout measurement is wrong when scroll or viewport offset is non zero. dist/es/components/motion/props.d.ts:71-78
Set reducedMotion="user" on a root MotionConfig. The default is "never", so animations ignore the OS accessibility setting unless you opt in. dist/es/components/motion-config/types.d.ts:5-20
Use dynamic variants with custom for stagger, not computed delays in reactive state. Pass :custom="index" and resolve delay inside the variant function. https://motion.dev/docs/vue-animation
Render live motion values with <RowValue :value="mv" /> in demos and readouts. It writes innerHTML directly and keeps fast values off the Vue render path. dist/es/components/RowValue.d.ts:1-15
Use v-motion for plain elements when a wrapper component does not fit. Register it globally with app.use(MotionPlugin), or create presets with createPresetDirective. The directive supports SSR through getSSRProps and defaults to domMax features. dist/es/directive/index.mjs:153-172
Gesture shorthand props focus, hover, press, inView were removed in v2.0.0. Use whileFocus, whileHover, whilePress, whileInView for animation, and event props like onHoverStart for logic. See references/migration.md

Common tasks

Enter and exit, stagger, drag, scroll linked, imperative useAnimate, shared layout, Reorder lists, directive usage, LazyMotion, and Nuxt setup, each with a runnable snippet: references/recipes.md

Changes since the 2.2.1 baseline

2.3.0: arc() motion along an arc, usable as transition: { path: arc(...) }. useAnimate now respects MotionConfig skipAnimations.
2.4.0: multidimensional Reorder, axis="xy" on Reorder.Group.
2.4.2: exit and enter animations restored for KeepAlive cached components.
2.4.4: Nuxt module no longer transpires motion-v in builds.

Details and links: references/migration.md

Version specific notes

SVG positions use attrX, attrY, attrScale instead of x, y, scale (dist/es/types/state.d.ts:15-20).
useSpring accepts a value or a MotionValue source and returns the matching type (dist/es/value/use-spring.d.ts:6-7).
useTransform maps ranges and also returns a named map of outputs in one call (dist/es/value/use-transform.d.ts:54-97).
AnimatePresence supports mode sync, wait, popLayout, plus anchorX for popLayout exit direction (dist/es/components/animate-presence/types.d.ts:1-8).
Directive and components share one resolver, so v-motion inherits variant, presence, and config context (dist/es/utils/resolve-motion-props.d.ts:11-15).

motion-v-skilld