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

683stars33forksUpdated 6/22/2026

Web Development #frontend #motion #ui #animation #nuxt #vue

Security Assessment

Safe(100/100)

Security Score100/100

About motion

The Motion Vue skill provides expert guidance for implementing animations in Vue 3 and Nuxt applications using the motion-v library. It serves as a comprehensive reference system that helps developers add production-ready, hardware-accelerated animations with minimal bundle size impact. The skill is designed to load documentation progressively, ensuring only relevant information is accessed based on the current task.

This skill covers the complete Motion Vue API including the Motion component for declarative animations, gesture-based interactions (hover, tap, drag), scroll-linked animations, layout transitions, and composables like useMotionValue, useScroll, and useSpring. It provides structured guidance on when to use Motion Vue versus alternatives like GSAP or CSS animations, helping developers make informed architectural decisions. The skill includes practical examples for common animation patterns such as fade-in effects, scale transitions, scroll-triggered animations, and spring physics.

Primary users include Vue 3 and Nuxt developers building interactive user interfaces that require smooth, performant animations. The skill is particularly valuable for frontend developers working on modern web applications who need to implement gesture controls, scroll effects, or layout animations without writing complex animation logic from scratch. It supports both basic use cases like simple fade transitions and advanced scenarios involving shared element transitions and physics-based animations.

FAQ

When should I use Motion Vue instead of GSAP or CSS animations?

Use Motion Vue for declarative animations in Vue 3/Nuxt, gesture interactions, scroll-linked effects, and layout transitions. Choose GSAP for complex timelines, SVG morphing, or scroll-triggered sequences. Use CSS animations for simple transitions that don't require JavaScript control.

Is Motion Vue compatible with both Vue 3 and Nuxt?

Yes, Motion Vue supports both Vue 3 and Nuxt 3. For Vue 3, install with 'pnpm add motion-v'. For Nuxt 3, install 'motion-v @vueuse/nuxt' and add 'motion-v/nuxt' to your modules in nuxt.config.ts.

How does the progressive loading system work?

The skill uses a file-based reference system where you load only relevant documentation files based on your current task. Load components.md for Motion component and gestures, composables.md for hooks like useMotionValue and useScroll, or examples.md for animation patterns. This keeps token usage efficient (200 base tokens, 500-1500 per file).

Does Motion Vue support hardware acceleration?

Yes, Motion Vue provides hardware-accelerated animations that are production-ready and optimized for performance with minimal bundle size impact.

What animation features does Motion Vue provide?

Motion Vue supports declarative animations (fade, slide, scale), gesture-based interactions (hover, tap, drag), scroll-linked animations, layout animations, shared element transitions, and spring physics animations through its Motion component and composables.