Framer Motion layoutId

Animate between components

AnimateSharedLayout can be used to animate between completely different motion components that share the same layoutId prop.

In this example, each item contains a motion component with a layoutId="outline" prop that gets rendered only if the item is selected.

isSelected && <motion.div layoutId="underline" />;

When a new component with a layoutId gets added as another gets removed, the component will perform a layout animation from previous component.

The new component will also inherit any animating values from the old component as its initial state. So visually it'll be treated as one continuous component.

Note: If the previous component remains in the tree when the new one is added, it'll automatically be hidden using visibility: hidden. If the new component is subsequently removed, the previous component will be set back to visible.

<motion.div
  layoutId="underline"
  initial={false}
  animate={{ backgroundColor: "#ff0000" }}
/>