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.:

import { motion } from "framer-motion"

// Regular HTML becomes motion component
<motion.div />
<motion.button />
<motion.svg />
<motion.path />

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:

// Simple animation - x position changes
<motion.div animate={{ x: 100 }} />

// Multiple properties
<motion.div animate={{ x: 100, opacity: 1, scale: 1.2 }} />