Documentation

Documentation

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

React

LayoutGroup

LayoutGroup

motion components with a layout prop will detect and animate layout changes every time they commit a React re-render, or their layoutDependency prop changes.

LayoutGroup is used to group components that might not render together but do affect each-other's state.

Usage

Take these accordion items that each handle their own state:

function Item({ header, content }) {
  const [isOpen, setIsOpen] = useState(false)
  
  return (
    <motion.div
      layout
      onClick={() => setIsOpen(!isOpen)}
    >
      <motion.h2 layout>{header}</motion.h2>
      {isOpen ? content : null}
    </motion.div>
  )
}

If we arrange these next to each other in an Accordion, when their state updates, their siblings have no way of knowing: 

function Accordion() {
  return (
    <>
      <ToggleContent />
      <ToggleContent />
    </>  
  )
}

This can be fixed by grouping both components with LayoutGroup:

import { LayoutGroup } from "motion/react"

function Accordion() {
  return (
    <LayoutGroup>
      <ToggleContent />
      <ToggleContent />
    </LayoutGroup>  
  )
}

Namespace layoutId

Components expecting to perform shared layout animations are provided a layoutId prop.

In this following example, each Tab renders an element with the layoutId="underline" prop.

function Tab({ label, isSelected }) {
  return (
    <li>
      {label}
      {isSelected
        ? <motion.div layoutId="underline" />
        : null}
    </li>  
  )
}

function TabRow({ items }) {
  return items.map(item => <Tab {...item} />)
}

layoutId is global across your site. So to render multiple TabRows we want to group them with LayoutGroup and id prop:

function TabRow({ id, items }) {
  return (
    <LayoutGroup id={id}>
      {items.map(item => <Tab {...item} />)}
    </LayoutGroup>
}

LazyMotion

LazyMotion

MotionConfig

MotionConfig

A Motion+ membership will give you early access to features & content, access to our private Github and Discord, and more.

It's a one-time fee that grants lifetime access. No subscription necessary!

Learn more

Learn more

Learn more

MOTION+

Premium React components

Motion+ is a one-time fee, lifetime membership that supports Motion and grants access to the source code of an ever-growing library of examples.


You also gain access to Cursor and AnimateNumber, two exclusive new React components. Check out what they can do:

Get Motion+

Get Motion+