Layouts

Layout animations helps you animate the same element with changing properties.

For example, if you have a block of div that increases or decreases in size, and you want to animate that process, layouts are the way to go.

By simply passing a layoudId="some-text" to the element, you can animate the layout of it without having to worry about anything else.

<div className="h-full flex items-center justify-center">
      <nav className="flex items-center justify-center rounded-full border border-neutral-200 bg-white p-1 shadow-sm shadow-black/5 max-w-[calc(100%-2rem)] mx-auto">
        {links.map((item) => (
          <button
            key={item.href}
            type="button"
            onClick={() => setActiveLink(item.href)}
            className="relative rounded-full px-4 py-2 text-sm font-medium text-neutral-600 transition-colors duration-200 hover:text-neutral-950"
          >
            {isActive(item.href) ? (
              <motion.span
                layoutId="navbar-active-preview"
                className="absolute inset-0 rounded-full bg-neutral-200"
                transition={{ type: "spring", stiffness: 380, damping: 30 }}
              />
            ) : null}
            <span className="relative z-20">{item.label}</span>
          </button>
        ))}
      </nav>
    </div>

Here, the layoutId is navbar-active-preview. This is the ID that will be used to animate the layout of the element. The background follows the active link whichever it is. It also animates or slides it to the active link.

Cards Grid

Here's an example of layoutId in action.

The layoutID of the container which gets opened on click, matches to the layoutId of one of the child items.

Hence, the card which is clicked animates from one position to another.

Expanded buttons

If you want to animate the layout of a DOM element, you can use the layout prop.

It ensures that shrinking and expanding of the element is animated.

Here's an example of an expanded button.

Moving Avatar

Similar to the previous examples, here's an example of animating a position of an avatar (or any DOM element) to random positions.

Layouts are super helpful if put to the right use case. layoudId in particular can help you animate one element to another with animations.