npmIntermediate

framer-motion

Production-ready animations and gestures for React — declarative, physics-based, with layout animations and exit transitions.

animationreactgesturesuimotion

The Problem

CSS animations are hard to coordinate with React state. You want animations that respond to data changes, animate elements in/out, drag gestures, shared element transitions, and scroll-linked effects — all without managing timelines manually.

Mental Model

Replace any HTML element with its motion equivalent: <motion.div>. Add animate={{ opacity: 1, x: 0 }} and initial={{ opacity: 0, x: -20 }} and framer-motion handles the tween. AnimatePresence wraps conditionally rendered children to give them exit animations. layoutId enables shared element transitions.

60-second start

Fade and slide in on mount

import { motion } from 'framer-motion';

export function Card({ title, content }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut' }}
      className="bg-white rounded-xl p-6 shadow"
    >
      <h2>{title}</h2>
      <p>{content}</p>
    </motion.div>
  );
}

Use it when

React apps needing UI animations: page transitions, list reordering, drag-and-drop, hover effects, scroll-triggered reveals, and exit animations.

Skip it when

Non-React projects, performance-critical animations running at 120fps with many particles (use CSS or WebGL), or very simple opacity/transform transitions where CSS is sufficient.

Alternatives

motionThe newer, framework-agnostic version of framer-motion (same team)

react-springPhysics-based, no keyframes — different mental model

gsapFramework-agnostic, more control, better for complex timelines

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.