motion

Solid

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

Web & Frontend 45 stars 3 forks Updated today MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
55
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

<!-- ๐Ÿ”’ LOCKED โ€” managed by clade ยท auto-generated by sync-to-codex; edit source in .claude/ then re-run sync --> # Motion Vue (motion-v) Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size. **Current stable:** motion-v 1.x - Vue port of Motion (formerly Framer Motion) ## Overview Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file). ## When to Use **Use Motion Vue for:** - Simple declarative animations (fade, slide, scale) - Gesture-based interactions (hover, tap, drag) - Scroll-linked animations - Layout animations and shared element transitions - Spring physics animations **Consider alternatives:** - **GSAP** - Complex timelines, SVG morphing, scroll-triggered sequences - **@vueuse/motion** - Simpler API, less features, smaller bundle - **CSS animations** - Simple transitions without JS ## Installation ```bash # Vue 3 pnpm add motion-v # Nuxt 3 pnpm add motion-v @vueuse/nuxt ``` ```ts // nuxt.config.ts - Nuxt 3 setup export default defineNuxtConfig({ modules: ['motion-v/nuxt'], }) ``` ## Quick Reference | Working on... | Load file | | ---------------------------- | ------------------------- | | Motion component, gestures | references/components.md | | useMotionValue, useScroll | references/composables.md | | Animation examples, patterns | references/examples.md | ## Loading Fil...

Details

Author
YuDefine
Repository
YuDefine/nuxt-supabase-starter
Created
7 months ago
Last Updated
today
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content โ€” not just same category

Web & Frontend Listed

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

0 Updated today
samuhlo
Web & Frontend Listed

motion

Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation. Optimize bundle size with LazyMotion (4.6 KB) or useAnimate mini (2.3 KB). Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes. For simple list animations, use auto-animate skill instead (3.28 KB vs 34 KB). Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024).

1 Updated 2 days ago
NafisRayan
AI & Automation Listed

motion-framer

Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence exit animations, spring physics, and scroll-based effects. Use when building interactive UI components, micro-interactions, page transitions, or complex animation sequences.

1 Updated 2 days ago
NafisRayan