motion-v-skilld

motiondivision/motion-vue

motion-v

Version: 2.0.0-beta.4 (Feb 2026) Deps: framer-motion@^12.29.2, hey-listen@^1.0.8, motion-dom@^12.29.2, motion-utils@^12.29.2 Tags: latest: 2.0.0-beta.4 (Feb 2026)

References: Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

BREAKING:
```
focus
```
,
```
hover
```
,
```
press
```
,
```
inView
```
shorthand props — removed in v2.0.0-beta.1. Use
```
whileFocus
```
,
```
whileHover
```
,
```
whilePress
```
, and
```
whileInView
```
for animations, and full event handlers (e.g.
```
@hoverStart
```
,
```
@pressStart
```
) for logic source
NEW:
```
v-motion
```
directive — new in v2.0.0-beta.1, enables declarative animations on any element without requiring a
```
<motion>
```
component wrapper source
BREAKING: ESM-only — v2.0.0-beta.1 dropped CommonJS support. The package now only ships ESM (
```
.mjs
```
) exports source
NEW:
```
MotionPlugin
```
— new in v2.0.0-beta.1, a Vue plugin for global
```
v-motion
```
and custom preset directive registration
NEW:
```
createPresetDirective()
```
— new in v2.0.0-beta.1, allows creating reusable animation directives with baked-in motion options
BREAKING:
```
AnimatePresence
```
lazy discovery — v2.0.0-beta.1 refactored to use
```
data-ap
```
attribute for lazy discovery instead of eager registration source
DEPRECATED:
```
staggerChildren
```
and
```
staggerDirection
```
— deprecated in v1.4.0 in favor of using the
```
stagger()
```
utility within the
```
transition
```
prop source
NEW:
```
stagger()
```
utility — correctly handles staggering for newly-entering siblings alongside existing ones since v1.7.0 source
NEW:
```
useTransform
```
output maps — supports providing multiple output value maps for complex coordinate transformations since v1.9.0 source
NEW:
```
Reorder
```
auto-scrolling — supports automatic parent container scrolling when a
```
Reorder.Item
```
is dragged to the edges since v1.8.0 source
NEW:
```
useScroll
```
VueInstance support —
```
container
```
and
```
target
```
options now accept
```
VueInstance
```
(ref to component) since v1.6.0 source
NEW:
```
useInView
```
```
root
```
option — now accepts
```
MaybeRef
```
for dynamic root element assignment since v1.6.0 source
NEW:
```
AnimatePresence
```
direct children — supports multiple direct
```
motion
```
components as children since v1.10.0 source
NEW:
```
delayInMs
```
— exported as a standalone utility function for time-based animation delays since v1.6.0 source

Also changed:

useTransform

reactive update fix (v1.2.1) ·

sequence

at relative start (v1.3.0) ·

AnimatePresence

custom prop fix (v1.3.0) ·

motionGlobalConfig

exported (v2.0.0-beta.1) ·

FeatureBundle

tree-shaking architecture (v2.0.0-beta.1)

Best Practices

Create motion-supercharged components using
```
motion.create()
```
outside of the template to avoid re-creating the component on every render, which would break animations source

// Preferred
const MotionComponent = motion.create(Component)

// Avoid - re-created every render
<component :is="motion.create(Component)" />

Use
```
MotionValue
```
s in the
```
style
```
prop to animate values outside of the Vue render cycle, significantly improving performance by avoiding frequent re-renders source

vue

<script setup>
const x = useMotionValue(0)
</script>

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

Reduce initial bundle size from ~34kb to ~6kb by using the
```
m
```
component paired with
```
LazyMotion
```
to load features synchronously or asynchronously only when needed source

vue

<template>
  <LazyMotion :features="domAnimation">
    <m.div :animate="{ opacity: 1 }" />
  </LazyMotion>
</template>

Enable the
```
strict
```
prop on
```
LazyMotion
```
during development to catch accidental usage of the full
```
motion
```
component, which would negate the bundle size benefits of lazy loading source
Centralize animation settings like global transitions and site-wide
```
reducedMotion
```
policies using
```
MotionConfig
```
to ensure consistent behavior across all child components source
(experimental) Apply declarative animations directly to any standard HTML/SVG element using the
```
v-motion
```
directive in v2.0.0-beta.1+ without needing to wrap elements in a
```
<motion>
```
component source
Ensure
```
AnimatePresence
```
children have unique, stable
```
key
```
props and are direct children of the component to correctly track their removal for exit animations source
Synchronize layout animations across unrelated components (those that don't share a parent-child relationship but affect each other's layout) by wrapping them in a
```
LayoutGroup
```
source
Prevent visual distortion of child elements during parent layout animations by applying the
```
layout
```
prop to the immediate children as well, enabling scale correction source
Mark scrollable ancestors with
```
layoutScroll
```
and fixed-position ancestors with
```
layoutRoot
```
to ensure Motion correctly accounts for scroll offsets during layout measurements source

motion-v-skilld

NPX Install

Tags

SKILL.md Content

motiondivision/motion-vue
`motion-v`

API Changes

Best Practices