Interface LayoutProps

If true, this component will automatically animate to its new position when its layout changes.

<motion.div layout />
Copy

This will perform a layout animation using performant transforms. Part of this technique involved animating an element's scale. This can introduce visual distortions on children, boxShadow and borderRadius.

To correct distortion on immediate children, add layout to those too.

boxShadow and borderRadius will automatically be corrected if they are already being animated on this component. Otherwise, set them directly via the initial prop.

If layout is set to "position", the size of the component will change instantly and only its position will animate. If layout is set to "size", the position of the component will change instantly but its size will animate.

If layout is set to "size", the position of the component will change instantly and only its size will animate.

If layout is set to "preserve-aspect", the component will animate size & position if the aspect ratio remains the same between renders, and just position if the ratio changes.

Enable shared layout transitions between different components with the same layoutId.

When a component with a layoutId is removed from the React tree, and then added elsewhere, it will visually animate from the previous component's bounding box and its latest animated values.

  {items.map(item => (
     <motion.li layout>
        {item.name}
        {item.isSelected && <motion.div layoutId="underline" />}
     </motion.li>
  ))}
Copy

If the previous component remains in the tree it will crossfade with the new component.

Whether an element should be considered a "layout root", where all children will be forced to resolve relatively to it. Currently used for position: sticky elements in Framer.

Whether a projection node should measure its scroll when it or its descendants update their layout.