> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/alpine/shared-layout.md).

# x-shared-layout

FLIP animations between elements that take turns being visible: an underline that slides between links, a pill that hops between tabs.

FLIP animations between elements that take turns being visible: an underline that slides between links, a pill that hops between tabs.

| Directive / modifier                                        | What it does                                                                                                       |
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `x-shared-layout`                                           | The root. Holds the groups; all animation settings live here                                                       |
| `x-shared-layout:element="name"`                            | A candidate. The expression is the group name. Candidates with the same name form one group. Pair with `x-show`    |
| `x-shared-layout.duration.300ms`                            | Tween duration (default 300ms). Ignored when `.spring` is set                                                      |
| `x-shared-layout.spring`                                    | Use a spring instead of the default tween                                                                          |
| `x-shared-layout.mass.1` / `.stiffness.240` / `.damping.30` | Spring settings; only applied with `.spring`                                                                       |
| `x-shared-layout.reducemotion`                              | Skip the animation when the user has `prefers-reduced-motion: reduce`. Not checked unless this modifier is present |

`x-show` controls visibility. The plugin only tracks which candidate in a group is currently shown, and animates the handoff between the old element's bounds and the new one's. Low-power devices swap without animating. One root can host any number of independent groups; each name gets its own generated `data-layout-id`.

## Examples

### A pill that hops between segments

Use one hidden `x-shared-layout:element` per option, shown by `x-show` on the selected one:

```html
<div x-shared-layout x-data="{ selected: 0 }">
  <button class="relative" @click="selected = 0">
    Apples
    <span
      class="absolute inset-0 -z-10 bg-canvas rounded-full"
      x-show="selected === 0"
      x-shared-layout:element="pill"
    ></span>
  </button>
  <button class="relative" @click="selected = 1">
    Oranges
    <span
      class="absolute inset-0 -z-10 bg-canvas rounded-full"
      x-show="selected === 1"
      x-shared-layout:element="pill"
    ></span>
  </button>
</div>
```

The segmented filter control (`filter-segmented`) and tab underline in `core-tab` use this pattern. Give each candidate `hidden` in the HTML so nothing flashes before Alpine loads.

### Two independent groups in one subtree

Use a different name for each group. The header does this for its hover underline and its current-page underline:

```html
<nav x-shared-layout>
  <a>Home <span x-show="hovered === 'home'" x-shared-layout:element="hover"></span></a>
  <a>Home <span x-show="current === 'home'" x-shared-layout:element="current"></span></a>
  …
</nav>
```

Each name animates on its own; showing the hover underline never moves the current-page one.

### A spring handoff

Use the `spring` modifier with its settings for a bouncier move:

```html
<nav x-shared-layout.spring.stiffness.240.damping.30>…</nav>
```

## Options

All settings are modifiers on the root and apply to every handoff in the subtree. There is no per-element animation setting. Use two roots when groups need different timing.