skills.rest
akornmeier
akornmeierCOMMUNITY
Explore all skills by this author →
𝕏@akornmeierGitHub

motion-vue

Drive Vue animations with motion-v for gestures, scroll effects, and layout transitions.

4|Updated Nov 16, 2025
Search Tags:#layout#vue#patterns#drag#scroll#animate#motion-v
One-click install
npx skills add https://github.com/akornmeier/claude-config --skill motion-vue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-vue
Source: https://github.com/akornmeier/claude-config/tree/main/skills/motion-vue-skill
Command: npx skills add https://github.com/akornmeier/claude-config --skill motion-vue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables advanced Vue animations by using motion-v to drive interactive UI, reducing boilerplate and ensuring smooth transitions.

Core Features & Use Cases

  • Motion components for Vue (motion.div, motion.v) enable declarative animation definitions.
  • Gesture and interaction animations using whileHover, whilePress, whileDrag for responsive UI.
  • Scroll-linked and viewport-aware effects with useScroll, whileInView, and AnimatePresence.
  • Layout animations and transitions with layout and layoutId, plus LayoutGroup for coordinated changes.
  • Presence transitions and orchestration with AnimatePresence for modals and dynamic content.
  • Real-world use: draggable lists, modal dialogs with transitions, parallax effects, and progressive enhancements.

Quick Start

Install motion-v in your project and import the motion components in a Vue component. For example, install with npm install motion-v, then import { motion } from 'motion-v' and use a simple motion.div with initial and animate props.

Frequently Asked Questions about motion-vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create Vue animations with scroll-linked and viewport-aware effects?▼

Drive scroll-linked Vue animations by using the useScroll hook and whileInView prop to trigger transitions when elements enter the viewport or respond to scroll position changes.

Can I use drag and press gestures for interactive UI animations in Vue?▼

Yes, you can implement drag and press gestures in Vue animations using whileDrag, whilePress, and whileHover props to create responsive UI interactions without manual event listener boilerplate.

What is the best way to animate layout changes when reordering dynamic lists in Vue?▼

Animate layout changes in Vue by applying the layout and layoutId props to motion components, which automatically calculates and animates transitions when elements reorder or resize within a LayoutGroup.

How do I handle exit animations for modals and dynamic content in Vue?▼

Handle exit animations by wrapping dynamic content or modals in AnimatePresence to orchestrate presence transitions, ensuring smooth enter and exit animations when elements mount or unmount.

Does motion-v support declarative animation definitions for Vue components?▼

Yes, motion-v supports declarative Vue animations through motion components like motion.div, allowing you to define transitions using initial, animate, exit, and transition props directly in templates.

What do I need to set up before using motion-v in my Vue project?▼

Install motion-v via npm in your Vue project, then import the motion components into your Vue component file to start defining declarative animations without additional complex environment configuration.

Related Skills

Explore More Software Engineering Skills→
molaei2000molaei2000
1

motion

Integrate Motion Vue's declarative animations and gestures into Vue 3/Nuxt apps.

Community
Intermediate
RamonsDkaRamonsDka
1

animejs

Animate CSS, SVG, and JavaScript objects with Anime.js timelines and effects.

Community
Advanced
wooson00308wooson00308
1

dotween-patterns

Animate Unity UI with DOTween while preserving LayoutGroup integrity.

Community
Intermediate
markus41markus41
18

Framer Motion Skill

Create declarative animations and gesture recognition for React applications with Framer Motion.

Community
Intermediate