skills.rest
DanielShuguang
DanielShuguangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

motion

Create declarative animations and transitions for Vue 3 and Nuxt applications.

1|Updated Jul 30, 2023
Search Tags:#ui#frontend#vue#animation#transitions#nuxt
One-click install
npx skills add https://github.com/DanielShuguang/tool-box --skill motion-danielshuguang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/DanielShuguang/tool-box/tree/main/.trae/skills/motion
Command: npx skills add https://github.com/DanielShuguang/tool-box --skill motion-danielshuguang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of adding sophisticated animations and transitions to Vue.js and Nuxt.js applications, enhancing user experience without a steep learning curve.

Core Features & Use Cases

  • Declarative Animations: Define animations using simple props on any HTML or SVG element.
  • Gesture & Scroll Interactions: Easily implement hover, tap, drag, and scroll-linked animations.
  • Layout Animations: Animate elements as they enter, exit, or change position in the layout.
  • Use Case: Add a smooth fade-in and slide-up effect to a list of cards as they become visible on scroll, or create interactive buttons that scale up on hover.

Quick Start

Use the motion skill to animate a div element with initial opacity 0 and animate to opacity 1.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I add declarative animations to Vue 3 components?▼

Add declarative animations to Vue 3 by installing the motion-v library and applying animation props directly onto HTML or SVG elements. This enables dynamic visual transitions and gesture interactions without complex logic.

Can I create scroll-linked transitions in Nuxt applications?▼

Yes, you can create scroll-linked transitions in Nuxt applications using the motion-v library. It supports scroll-linked effects, enabling elements to animate dynamically based on scroll position.

Does Vue animation with motion-v support gesture interactions?▼

Yes, Vue animation with motion-v supports gesture interactions. You can easily implement hover, tap, and drag animations on interactive elements like buttons to scale up or respond to user input.

What is the best way to animate layout changes in Vue.js?▼

Animate layout changes in Vue.js using the motion-v library's layout animation features. It automatically animates elements as they enter, exit, or shift position within the DOM layout.

Do I need pnpm to set up animations in Vue or Nuxt?▼

Yes, you need pnpm to install the motion-v library and integrate it within your Vue or Nuxt project. This package manager is required for setting up these declarative animations.

Related Skills

Explore More Software Engineering Skills→
machhub-devmachhub-dev
1

machhub-nuxt-vue

Integrate the MACHHUB SDK into Nuxt 3 and Vue 3 projects with templates and composables.

Official
Intermediate
vito1317vito1317

motion

Animate Vue 3 and Nuxt 3 components with declarative Motion Vue.

Community
Intermediate
incubrainincubrain
78

motion

Automate hardware-accelerated animations in Vue 3 and Nuxt with motion-v.

Official
Intermediate
RodrigoVeraCandiaRodrigoVeraCandia

Generador de animaciones

Implement Angular Animations, PrimeNG transitions, and custom CSS in Angular 19+ applications.

Community
Intermediate