motion_skill

Overview

This skill provides a focused guide for adding animations with Motion Vue (motion-v) in Vue 3 and Nuxt projects. It highlights the motion component API, gesture animations, scroll-linked effects, layout transitions, and key composables to build hardware-accelerated, production-ready animations with a small bundle footprint.

How this skill works

The skill explains how to use Motion components to wrap HTML/SVG elements and declare initial, animate, and exit states with transition options. It also covers gesture props (hover, press, drag), scroll- and viewport-linked triggers, and composables (useMotionValue, useSpring, useScroll, useInView, animate) for programmatic control and value transforms.

When to use it

• Add simple declarative animations like fade, slide, and scale to UI elements.
• Create gesture-driven interactions (hover, tap/press, drag) with spring physics.
• Animate elements when they enter the viewport or link animations to scroll position.
• Implement layout transitions and shared element animations between routes or components.
• Prefer Motion Vue when you need hardware-accelerated, production-ready animations with minimal bundle size.

Best practices

• Use Motion components for element-scoped animations and composables for cross-component value control.
• Keep transitions lightweight: prefer spring settings for natural motion and short durations for UI feedback.
• Use viewport options (once, margin) to avoid repeated animations and improve performance.
• Combine useMotionValue and useTransform to drive complex, scroll-linked effects without heavy JavaScript loops.
• Consider fallback to CSS for ultra-simple transitions to avoid unnecessary JS overhead.

Example use cases

• Fade and slide a card list into view with :initial and :whileInView for progressive reveal.
• Add whileHover and whilePress to buttons for tactile micro-interactions using spring transitions.
• Link header style or parallax effects to page scroll with useScroll and useTransform.
• Animate shared elements between pages using layout transitions for smooth route changes.
• Create draggable UI panels with drag gestures and physics-based motion for natural interaction.