patternjavascriptTip

Framer Motion Layout Animations with the layout Prop

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

layout animationframer motion layoutFLIPposition change animationshared elementlayoutId

Problem

When a component changes size or position due to state changes (e.g., expanding an accordion, reordering a list), the transition is abrupt.

Solution

Add layout to any motion element whose position or size can change. Framer Motion uses FLIP internally to animate between positions smoothly.

<motion.div layout>
  {isExpanded && <p>Extra content</p>}
</motion.div>

// For list reordering:
{items.map(item => (
  <motion.li key={item.id} layout>
    {item.name}
  </motion.li>
))}

Control the layout transition separately:

<motion.div layout transition={{ layout: { duration: 0.3, type: 'spring' } }}>
  ...
</motion.div>

Why

Layout changes in CSS happen instantly because browsers repaint synchronously. layout triggers a FLIP calculation so Framer Motion can interpolate from the old geometry to the new geometry.

Gotchas

layout on every ancestor in a nested tree can cause performance issues; be selective.
Use layoutId to animate a shared element between two different DOM nodes (e.g., expanding a card to a modal).
Opacity and color cannot be animated with layout alone — combine with animate for those.
Layout animations can conflict with CSS transforms applied by other libraries.

Revisions (0)

No revisions yet.