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