motion

# 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 15, Vite 6, 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**: ...