motion
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/Nuxt
By onmax · 2,326 installs
npx skills add onmax/nuxt-skills --skill motion
Source repository · Upstream listing
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
Quick Reference
Working on... Load file
Motion component, gestures references/components.md
useMotionValue, useScroll references/composables.md
Animation examples, patterns references/examples.md
Loading Files
Consider loading these reference files based on your task:
[ ] [references/components.md](references/components.md) if using Motion component, gestures, or layout animations
[ ] [references/composables.md](references/composables.md) if using useMotionValue, useScroll, useSpring, or animate()
[ ] [references/examples.md](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:
Gesture Animations
Scroll Animations
Available Guidance
[references/components.md](references/components.md) Motion component variants, animation props, gesture props, layout animations, transition configuration
[references/composables.md](references/composables.md) useMotionValue, useSpring, useTransform, useScroll, useInView, animate()
[references/examples.md](references/examples.md) External resources, component libraries, animation patterns and inspiration