Documentation

Documentation

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

React Three Fiber

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

React Three Fiber

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

Reorder

Reorder

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+

Introducing Cursor

Cursor is a creative cursor component for React, that makes it super easy to make custom cursor and follow cursor effects.


Hover over these examples to check out some of what it can do:

Custom cursor

Follow with spring

Multicursor

?

?

Get Motion+

Get Motion+