0Pricing
React Academy · Lesson

Layout Animations & AnimatePresence

Animate layout changes automatically with layout prop and mount/unmount with AnimatePresence.

Layout Animations

Add the layout prop to a motion component and Framer Motion automatically animates any layout changes (size, position) caused by state or DOM mutations — no manual positioning needed.

<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
  {/* Width animates smoothly when isExpanded changes */}
</motion.div>

Layout Prop Values

The layout prop accepts true (all layout), 'position' (position only), or 'size' (size only) to limit what's animated.

<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size">     {/* only width/height animate */}

All lessons in this course

  1. Motion Components & Basic Animations
  2. Variants for Orchestrated Animations
  3. Gesture Animations: Hover, Tap & Drag
  4. Layout Animations & AnimatePresence
← Back to React Academy