Layout animations with Framer Motion

Framer Motion’s layout prop animates layout-only changes—size and position—when a component’s flex/grid context changes, without hand-writing FLIP math.

Basic layout prop#

<motion.div layout className="card">
  {children}
</motion.div>

When siblings reorder or width changes, Motion interpolates bounds. Prefer transform and opacity for cheap compositor work; avoid animating top/left when possible.

Shared layout with layoutId#

Two elements in different parts of the tree can morph during route transitions:

<motion.img layoutId="hero" src={src} />

Use unique IDs per logical entity. Duplicate layoutIds on screen simultaneously cause undefined behavior.

layoutRoot#

Wrap subtrees that should not participate in global layout measurement when lists are huge—reduces measurement cost.

Accessibility#

Respect prefers-reduced-motion: reduce—disable or simplify layout animations for those users (Framer exposes useReducedMotion).

Summary#

layout and layoutId sell polish in dashboards and media UIs. Profile list reordering at scale and always offer a reduced-motion path.