Framer Motion Layout Animations: Practical Implementation and Common Pitfalls

The Problem: UI Jumps in Dynamic Layouts

When UI elements change state—like expanding a card or moving between views—the browser snaps to the new position instantly. Manual CSS transitions on height/width trigger expensive reflows and often stutter. The layout prop in Framer Motion solves this using the FLIP (First, Last, Invert, Play) technique, animating via transforms instead of layout properties for smooth 60fps transitions.

How Layout Animations Work

The layout prop automatically detects when an element's bounding box changes in the DOM and interpolates the transition. Instead of animating width or height, it calculates the position difference and applies transform: translate() scale() updates. This works seamlessly with Flexbox, Grid, and absolute positioning—properties that CSS cannot traditionally animate.

Shared Element Transitions with layoutId

The layoutId prop enables shared element transitions between different parts of your React tree. When two components share the same layoutId, Framer Motion treats them as a single entity. If one is removed and another with the same ID is added, the library animates the position and size from the first element directly into the second, creating a seamless "fly-in" effect across parent containers. Both elements must be rendered simultaneously or in sequence for the transition to work.

Implementation Example: Expandable Card

This example demonstrates a card that expands smoothly when clicked. Tested with Framer Motion v11.x.

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

export default function ExpandableCard() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div style={{ padding: "20px" }}>
      <motion.div
        layout
        onClick={() => setIsExpanded(!isExpanded)}
        style={{
          width: isExpanded ? "400px" : "200px",
          height: isExpanded ? "300px" : "100px",
          background: "#eee",
          borderRadius: "10px",
          cursor: "pointer",
          overflow: "hidden"
        }}
      >
        <div>
          Click to Expand
          {isExpanded && (
            <p style={{ margin: "10px 0" }}>
              This content appears smoothly because the parent uses the layout prop.
            </p>
          )}
        </div>
      </motion.div>
    </div>
  );
}

Verification Steps

1. Run the component in any React environment with Framer Motion installed (npm install framer-motion). No special permissions required.
2. Open DevTools (F12), select the card element, and watch the Styles panel during the click animation.
3. Verify transform updates: You should see transform: translate3d(..., ...) scale(...) properties changing rapidly. If width or height change continuously, the layout animation isn't active.

Trade-offs and Limitations

Layout animations are powerful but have specific constraints:

• Aspect ratio distortion: When an element changes from a thin rectangle to a wide square, internal content may stretch. Use layout="position" on child elements to animate only their position, not scale.
• CSS transition conflicts: Avoid transition: all 0.3s on elements with the layout prop. Framer Motion manages styles directly during animation; CSS transitions compete with its transform updates, causing jitter.
• Performance on complex layouts: While transforms are GPU-accelerated, calculating bounding boxes for many nested layout elements can cause frame drops on low-end devices. Test with your target hardware.

Important Clarifications

The layout prop requires the element to be a motion component (e.g., motion.div). Using layout="position" directly on elements is not valid in the current Framer Motion API. For shared element transitions, both the source and target elements must exist in the React tree at some point during the transition—either simultaneously or in sequence.

Actionable Next Steps

To implement layout animations in your project:

1. Install Framer Motion: npm install framer-motion
2. Add the layout prop to any motion component whose size or position changes based on state
3. For shared element transitions, ensure both elements have matching layoutId values
4. Test on target devices, especially mobile, to check for performance issues with multiple animated elements

Remember that layout animations work best for moderate complexity. For very large lists or deeply nested animated components, consider optimizing with AnimatePresence and selective animation triggering.