motion-framerlisted

# Motion & Framer Motion ## Overview Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides `motion` components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), and includes advanced features like layout animations, exit animations, and spring physics. **When to use this skill:** - Building interactive UI components (buttons, cards, menus) - Creating micro-interactions and hover effects - Implementing page transitions and route animations - Adding scroll-based animations and parallax effects - Animating layout changes (resizing, reordering, shared element transitions) - Drag-and-drop interfaces - Complex animation sequences and state-based animations - Replacing CSS transitions with more powerful, controllable animations **Technology:** - **Motion** (v11+) - The modern, smaller library from Framer Motion creators - **Framer Motion** - The full-featured predecessor (still widely used) - React 18+ compatible, also supports Vue - Supports TypeScript - Works with Next.js, Vite, Remix, and all modern React frameworks ## Core Concepts ### 1. Motion Components Convert any HTML/SVG element into an animatable component by prefixing with `motion.`: ```jsx import { motion } from "framer-motion" // Regular HTML becomes motion component <motion.div /> <motion.button /> <motion.svg /> <motion.path /> ```