motionlisted

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).
NafisRayan/100x-Agent-Toolkit · ★ 1 · Web & Frontend · score 64

Install: claude install-skill NafisRayan/100x-Agent-Toolkit

# Motion Animation Library ## Overview Motion (package: `motion`, formerly `framer-motion`) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code. **Key Capabilities:** - **Gestures**: drag, hover, tap, pan, focus with cross-device support - **Scroll Animations**: viewport-triggered, scroll-linked, parallax effects - **Layout Animations**: FLIP technique for smooth layout changes, shared element transitions - **Spring Physics**: Natural, customizable motion with physics-based easing - **SVG**: Path morphing, line drawing, attribute animation - **Exit Animations**: AnimatePresence for unmounting transitions - **Performance**: Hardware-accelerated, ScrollTimeline API, bundle optimization (2.3 KB - 34 KB) **Production Tested**: React 19, Next.js 16, Vite 7, Tailwind v4 --- ## When to Use This Skill ### Use Motion When: **Complex Interactions**: - Drag-and-drop interfaces (sortable lists, kanban boards, sliders) - Hover states with scale/rotation/color changes - Tap feedback with bounce/squeeze effects - Pan gestures for mobile-friendly controls **Scroll-Based Animations**: - Hero sections with parallax layers - Scroll-triggered reveals (fade in as elements enter viewport) - Progress bars linked to scroll position - Sticky headers with scroll-dependent transforms **Layout Transitions**: -