Using Framer Motion's layout prop for automatic size and position animations

Quick answer

Add the layout prop to a motion component and Framer Motion will automatically animate any change in the element’s size or position. It does this by measuring the element’s bounding box before and after the change and applying a FLIP‑based transform, so you don’t need to write manual keyframes or animate top, left, width or height directly.

How the layout prop works

The layout flag tells Framer Motion to run a FLIP (First, Last, Invert, Play) cycle on every render where the element’s layout might have changed. First, the component records its current DOM rect. After React reconciles the new state, Framer Motion records the new rect, calculates the delta, applies an inverse transform to cancel the move, then animates the transform back to zero. The result is a smooth transition that uses GPU‑friendly transform properties instead of layout‑triggering ones.

Worked example

Below is a simple React component that toggles a box between two sizes. The layout prop makes the size change animate without any extra CSS.

import { motion } from "framer-motion";
import { useState } from "react";

export function ResizableBox() {
  const [big, setBig] = useState(false);
  return (
    
      
        {big ? "Large box" : "Small box"}
      
       setBig(!big)}
        whileTap={{ scale: 0.95 }}
      >
        Toggle size
      
    
  );
}

When the button is clicked, the state big flips, causing the motion.div to receive new inline styles (implicitly via the conditional text). Because layout is present, Framer Motion intercepts the size change and animates it via a transform matrix. You can verify this in the browser’s Elements panel: while the animation runs, you will see a transform: translate(...) matrix(...) value on the div, while its width and height remain static.

Limits and common mistakes

While the layout prop removes a lot of boilerplate, it is not a silver bullet. Keep the following points in mind to avoid unexpected behavior or performance hits.

1. Conflicting CSS transitions

If you also define a CSS transition on the same properties (e.g., transition: width 0.3s in a stylesheet), the browser will animate those properties alongside Framer Motion’s transform, often causing jitter or double‑animation. Remove or disable CSS transitions for any property you intend to animate with layout.

2. Complex transforms or absolute positioning

Elements that already have non‑trivial transform values (like rotations or skews) or are positioned with top/left can produce visual glitches because the FLIP calculation assumes the element’s layout is defined purely by its box model. In such cases, wrap the animated content in an extra motion.div that has no pre‑existing transform, or reset the conflicting styles before the animation starts.

3. Performance in large lists

Each element with layout forces Framer Motion to read its bounding box on every render. In a long list where many items change size simultaneously, this layout‑thrashing can drop frame rates. Mitigate by:

• Using LayoutGroup to synchronize sibling animations and reduce redundant measurements.
• Batching state updates so that only a subset of items changes at a time.
• Considering alternative techniques (like CSS transform animations) for items that only need simple scale or opacity changes.

4. Shared‑element transitions need layoutId

The layout prop alone only animates size/position changes of a single element. To animate an element that appears to “move” from one component to another (e.g., a thumbnail expanding into a full‑size image), give both components the same layoutId value. Framer Motion will then treat them as the same shared element and animate between their respective layouts.

Practical verification checklist

1. Add layout to a motion component that changes size or position via state or props.
2. Open DevTools → Elements panel, locate the animated element.
3. While the animation plays, inspect the style attribute: you should see a transform value changing, while width, height, top, left remain constant.
4. Confirm there are no competing CSS transitions on those properties in your stylesheet.
5. If you notice jitter or missing animation, check for existing transform styles or absolute positioning that might interfere.

By following the pattern above and watching for the listed pitfalls, you can rely on Framer Motion’s layout prop to deliver smooth, performant layout animations with minimal manual effort.