framer-motion-layout

Framer Motion Layout Animations

When to Use This Skill

Apply when implementing shared element transitions, layout animations for reordering, or coordinated mount/unmount animations. When the user asks about Framer Motion layout animations, layoutId, or AnimatePresence.

Related skills: For core animation use framer-motion-core; for variants use framer-motion-variants; for React integration use framer-motion-react.

Layout Prop

The layout prop enables automatic position animations when layout changes:

<motion.div layout>
  {items.map(item => (
    <motion.div key={item.id} layout />
  ))}
</motion.div>

Layout Modes

Mode	Behavior
true	Animate position and size
"position"	Animate only position
"size"	Animate only size

<motion.div layout="position" />
<motion.div layout="size" />

layoutId for Shared Element Transitions

layoutId enables smooth transitions between elements in different components:

Page Transitions

// Page A
function CardA() {
  return <motion.div layoutId="card" />;
}

// Page B
function CardB() {
  return <motion.div layoutId="card" />;
}

When CardA unmounts and CardB mounts with the same layoutId, Framer Motion animates the element smoothly between positions.

Modal Overlays

function ListItem({ item, onClick }) {
  return (
    <motion.div layoutId={`item-${item.id}`} onClick={onClick}>
      {item.name}
    </motion.div>
  );
}

function Modal({ item }) {
  return (
    <motion.div layoutId={`item-${item.id}`}>
      <h2>{item.name}</h2>
      <p>{item.description}</p>
    </motion.div>
  );
}

AnimatePresence for Layout

AnimatePresence enables exit animations:

import { AnimatePresence, motion } from "framer-motion";

function TodoList({ todos }) {
  return (
    <motion.ul>
      <AnimatePresence>
        {todos.map(todo => (
          <motion.li
            key={todo.id}
            layout
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 20 }}
          />
        ))}
      </AnimatePresence>
    </motion.ul>
  );
}