Framer Motion
The production-ready animation library for React. Framer Motion provides a declarative API for complex UI animations — spring physics, keyframes, layout animations, gesture handling (drag, tap, hover), and exit animations. The motion.div component wraps HTML elements with animation capabilities via props (animate, initial, exit, transition, variants). Powers polished UI transitions in countless React applications and design systems including Radix UI Themes.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Local library — no network access. Animates CSS and SVG properties only — no code execution risk. MIT licensed.
⚡ Reliability
Best When
You're building polished React UI with complex animations — page transitions, drag interactions, layout animations — and want a declarative, accessible API.
Avoid When
You need animations in non-React environments, have bundle size constraints, or only need simple CSS transitions.
Use Cases
- • Add page transitions and component enter/exit animations to React apps using AnimatePresence and exit prop without custom CSS keyframes
- • Implement drag-and-drop interfaces with smooth spring physics using Framer Motion's drag prop and drag constraints
- • Create shared layout animations where elements animate between positions across page transitions using layoutId
- • Build gesture-responsive UI components (swipe to delete, drag to reorder) using Framer Motion's useDragControls and drag handlers
- • Animate number counters, progress bars, and data visualizations using Framer Motion's useMotionValue and useTransform hooks
Not For
- • Non-React frameworks — Framer Motion is React-only (use Motion One or GSAP for vanilla JS)
- • Simple CSS transitions — Framer adds ~50KB; CSS transitions are sufficient for basic hover/focus states
- • Performance-critical animations with hundreds of simultaneous moving elements — use GSAP for high-performance animation sequences
Interface
Authentication
Local library — no authentication. Free for open source use.
Pricing
Framer Motion the library is MIT open source. Framer (the design/hosting platform) is a separate commercial product. The library is maintained by the Framer team but freely usable.
Agent Metadata
Known Gotchas
- ⚠ AnimatePresence must wrap components that unmount to enable exit animations — without AnimatePresence, exit prop animations don't play on component removal
- ⚠ layout animations (layout prop) require all animating siblings to also have layout prop — partial layout animation setup causes elements to jump instead of animate
- ⚠ Framer Motion 11.x changed the import path for some utilities — check migration guide when upgrading from v10 or earlier
- ⚠ drag constraints using a ref (dragConstraints={containerRef}) require the ref element to be in the DOM before the draggable element mounts — use useRef and ensure container renders first
- ⚠ Animations on SVG elements require motion.path, motion.circle, etc. — generic motion() factory wrapping SVG elements may not animate SVG-specific attributes (d, cx, cy)
- ⚠ AnimatePresence mode='wait' blocks all entry animations until all exit animations complete — in lists with many items, this can cause significant UI delays; use mode='popLayout' for list reordering
Alternatives
Full Evaluation Report
Comprehensive deep-dive: security analysis, reliability audit, agent experience review, cost modeling, competitive positioning, and improvement roadmap for Framer Motion.
AI-powered analysis · PDF + markdown · Delivered within 30 minutes
Package Brief
Quick verdict, integration guide, cost projections, gotchas with workarounds, and alternatives comparison.
Delivered within 10 minutes
Score Monitoring
Get alerted when this package's AF, security, or reliability scores change significantly. Stay ahead of regressions.
Continuous monitoring
Scores are editorial opinions as of 2026-03-07.