Framer Motion

Production-grade animation library for React. Declarative API over CSS transitions, spring physics, gesture handling, layout animations, and shared element transitions.

motionAnimatePresenceVariantslayout / layoutIduseAnimationuseMotionValuedrag

tween

CSS-like duration/easing. Good for opacity/color.

spring

Physics-based. stiffness + damping. Feels natural.

inertia

Momentum decay. Used for drag. velocity-based.

keyframes

Multi-stop animation. times: [0, 0.5, 1].

1. Basic Animations

initial · animate · exit · AnimatePresence

Basic Animations

The motion component accepts initial, animate, and transition props. Framer Motion interpolates between states automatically.

mount/unmount with AnimatePresence

<AnimatePresence>
  {visible && (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1   }}
      exit={  { opacity: 0, scale: 0.5 }}
    />
  )}
</AnimatePresence>

layout animation — shape morphing

// animate any CSS-animatable value
<motion.div
  animate={{
    borderRadius: '50%',
    width: 80,
    height: 80,
  }}
  transition={{ type: 'spring' }}
/>

Framer Motion Cheat Sheet

Core Props

initialStart state (or false to skip)

animateTarget state / controls ref

exitState when removed (needs AnimatePresence)

transitionHow to animate (type, duration, etc.)

variantsNamed states object

layoutAuto-animate layout changes

layoutIdShared element between renders

styleMotionValues for CSS props

Gesture Props

whileHoverAnimate on mouse over

whileTapAnimate on click/touch

whileDragAnimate while dragging

whileFocusAnimate on focus

dragtrue | "x" | "y"

dragConstraintsref or { top, left, right, bottom }

dragElastic0 = rigid, 1 = elastic, default 0.5

onDrag / onDragEndDrag event callbacks