Learn FRAMER-MOTION with Real Code Examples

Install via npm: npm install framer-motion

Import motion components: import { motion } from 'framer-motion'

Wrap components with motion tags (motion.div, motion.span)

Define animation variants or props

Use AnimatePresence for component enter/exit animations

React project (CRA, Vite, Next.js)

Modern browser with CSS transform support

Optional TypeScript for type-safe motion props

React dev tools for debugging

Framer Motion visualizer for variants

package.json - dependency management

App.js - main React app with motion components

components/ - motion-enhanced components

animations/ - reusable variants and transitions

hooks/ - optional custom motionValue or gesture hooks

npm install framer-motion - install library

npm run start - start React dev server

npm run build - production build with animations

npm test - test animated components

npm run lint - ensure code quality

Animations are language-agnostic

Text direction changes (RTL) do not affect motion

Dynamic content can animate naturally

Variants can be reused for different locales

No internal language restrictions

Respect prefers-reduced-motion user setting

Ensure keyboard focusable elements remain interactive

Use ARIA roles for animated components

Avoid motion that causes disorientation

Animations should enhance, not hinder, UX

CSS or styled-components for static styles

motion components handle transforms, opacity, scale

Integrates with Tailwind or other utility-first frameworks

Dynamic style changes via animate props

Supports responsive animations via media queries

React state or Redux/Zustand for dynamic animations

motionValues for reactive animation control

Variants synced with component props

AnimatePresence handles conditional components

Gestures trigger state updates for motion

No special data persistence needed

Animation state tied to React component state

motionValues update in real-time

Shared layout animations respond to DOM changes

Complex interactions managed via props and callbacks