skills.rest
onmax
onmaxCOMMUNITY
Explore all skills by this author →
Website𝕏@_onmaxGitHub

motion

Animate Vue 3 and Nuxt apps with declarative motion and gesture props.

Updated Jan 2, 2026
Search Tags:#vue#animation#transitions#motion#nuxt#gestures
One-click install
npx skills add https://github.com/onmax/claude-config --skill motion-onmax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/onmax/claude-config/tree/main/skills/motion
Command: npx skills add https://github.com/onmax/claude-config --skill motion-onmax

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of adding sophisticated animations and interactive effects to Vue 3 and Nuxt applications, enhancing user experience without complex code.

Core Features & Use Cases

  • Declarative Animations: Easily implement fade, slide, scale, and other common animations.
  • Gesture Interactions: Add dynamic responses to hover, tap, and drag events.
  • Scroll-Linked Effects: Create animations that react to user scrolling.
  • Layout Transitions: Animate elements as they enter, exit, or change position in the layout.
  • Use Case: An e-commerce site can use this Skill to animate product images as they enter the viewport, create smooth transitions between product details, and add subtle hover effects to buttons.

Quick Start

Use the motion skill to animate a div element with fade-in and slide-up effects when it enters the viewport.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I add scroll-linked animations to a Vue 3 application?▼

You can add scroll-linked animations to a Vue 3 application by using the provided useScroll composable to dynamically link visual effects to user scrolling. This enables elements to react smoothly as the viewport changes.

Can I use declarative transitions for layout changes in Nuxt?▼

Yes, you can use declarative transitions for layout changes in Nuxt by implementing the Motion component API. It animates elements automatically as they enter, exit, or shift position within the layout.

How do I add gesture interactions like drag and tap to Vue components?▼

You can add gesture interactions to Vue components by applying dedicated gesture props for hover, tap, and drag events. This allows your elements to respond dynamically without writing complex event listeners.

Does this Vue animation approach require external animation libraries?▼

No external animation libraries are required as dependencies. It provides built-in composables like useMotionValue and the Motion component API to handle dynamic visual effects natively within Vue 3 and Nuxt.

What is the best way to animate elements entering the viewport in Nuxt?▼

The best way to animate elements entering the viewport in Nuxt is by using the viewport animation features. This triggers declarative animations like fade-in or slide-up precisely when an element scrolls into view.

Why use composables like useMotionValue for dynamic visual effects instead of CSS?▼

Using composables like useMotionValue provides dynamic visual effects that respond directly to user input and scroll position, unlike static CSS. This enables fluid gesture interactions and scroll-linked transitions in Vue.

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
LuXDAmoreLuXDAmore

motion

Provide declarative animations, gesture effects, and scroll-linked transitions for Vue 3 and Nuxt 3.

Community
Intermediate
cslsoftwarescslsoftwares

developer-vuejs-routing-state

Configure Vue Router and Pinia with guards and lazy loading.

Community
Intermediate
moughamirmoughamir

tailwindcss-animations

Generate Tailwind CSS animation and transition utility patterns for web interfaces.

Community
Basic