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-

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. : Every motion component accepts animation props like animate , initial , transition , and gesture props like whileHover , whileTap , etc. 2. Animate Prop The animate prop defines the target animation state. When values change, Motion automatically animates to them: 3. Initial State Set the initial state before animation using the initial prop: Set initial={false} to disable initial animations on mount. 4. Transitions Control how animations move between states using the transition prop: Transition types: "tween" (default) Duration based with easing "spring" Physics based spring animation "inertia" Decelerating animation (used in drag) 5. Variants Organize animation states using named variants for cleaner code and propagation to children: Variant propagation Children automatically inherit parent variant states: Common Patterns 1. Hover Animations Animate on hover using whileHover prop: Hover with nested elements: 2. Tap/Press Animations Animate on tap/press using whileTap prop: 3. Drag Interactions Make elements draggable with the drag prop: Drag events: 4. Exit Animations (AnimatePresence) Animate components when they're removed from the DOM using AnimatePresence : Key requirements: Component must be direct child of <AnimatePresence Must have a unique key prop Use exit prop to define exit animation List items with exit animations: Staggered exit animations: 5. Layout Animations Automatically animate layout changes (position, size) with the layout prop: Grid layout animation: Shared layout animations (layoutId): Connect two different elements for smooth transitions using layoutId : 6. Scroll Based Animations Animate elements when they enter the viewport using whileInView : Viewport options: once: true Animation triggers only once amount: 0.5 Percentage of element visible (0 1) or "some" "all" margin: " 100px" Offset viewport boundaries Staggered scroll animations: 7. Spring Animations Use spring physics for natural, bouncy animations: Spring presets: Gentle : stiffness: 100, damping: 20 Wobbly : stiffness: 200, damping: 10 Stiff : stiffness: 400, damping: 30 Slow : stiffness: 50, damping: 20 Gesture Recognition Motion provides declarative gesture handlers: Gesture Props Gesture Events Event info objects contain: point: { x, y } Page coordinates offset: { x, y } Offset from drag start velocity: { x, y } Drag velocity Hooks useAnimate Manually control animations with the useAnimate hook: Animation controls: useSpring Create spring animated motion values: useInView Detect when an element is in viewport: Integration Patterns With GSAP Combine Motion for React state based animations and GSAP for complex timelines: With React Three Fiber Animate 3D objects using Motion values: With Form Libraries Animate form validation states: Performance Optimization 1. Use Transform Properties Transform properties (x, y, scale, rotate) are hardware accelerated: 2. Individual Transform Properties Motion supports individual transform properties for cleaner code: 3. Reduce Motion for Accessibility Respect user preferences for reduced motion: 4. Layout Animations Performance Layout animations can be expensive. Optimize with: 5. Use layoutId Sparingly layoutId creates shared layout animations but tracks elements globally. Use only when needed. Common Pitfalls 1. Forgetting AnimatePresence for Exit Animations Problem: Exit animations don't work 2. Missing key Prop in Lists Problem: AnimatePresence can't track elements 3. Animating Non Transform Properties Problem: Janky animations, poor performance 4. Overusing Layout Animations Problem: Performance issues with many layout animated elements 5. Not Using Variants for Complex Animations Problem: Duplicated animation code, no child orchestration 6. Incorrect Transition Timing Problem: Transitions don't apply to specific gestures Resources Official Documentation [Motion Docs](https://motion.dev/) Official Motion documentation [Framer Motion Docs](https://www.framer.com/motion/) Framer Motion (legacy) [Motion GitHub](https://github.com/framer/motion) Source code & examples Bundled Resources This skill includes: references/ api reference.md Complete Motion API reference variants patterns.md Variant patterns and orchestration gesture guide.md Comprehensive gesture handling guide scripts/ animation generator.py Generate Motion component boilerplate variant builder.py Interactive variant configuration tool assets/ starter motion/ Complete Motion + Vite starter template examples/ Real world Motion component patterns Community Resources [Motion Dev Discord](https://discord.gg/motion) Official community [Framer Motion Examples](https://www.framer.com/motion/examples/) Interactive examples [Motion Recipes](https://motion.dev/docs/recipes) Common patterns [CodeSandbox Templates](https://codesandbox.io/s/framer motion examples) Live demos

motion-framer