# LayoutGroup > Wrap regions in to keep identical layoutId values in sibling subtrees from cross-animating. Side-by-side tab strips demo. **Source:** [https://motion.svelte.page/examples/layout-group](https://motion.svelte.page/examples/layout-group) **Markdown mirror:** [https://motion.svelte.page/examples/layout-group.md](https://motion.svelte.page/examples/layout-group.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: scoped layoutId. Two sibling tab strips share `layoutId="underline"`. Each strip lives in its own `` so the underline animation stays scoped — clicking a tab in one strip never pulls the underline from the other. **Metadata:** tag: `LAYOUTGROUP` | pattern: `scoped shared-layout` ### Notes - Same `layoutId="underline"` appears in both tab strips. Without scoping, the underline would jump between strips because `motion` looks up `layoutId` on a single global registry. - Wrapping each strip in ` ` / `id="strip-b"` prefixes the registry key — `strip-a::underline` vs `strip-b::underline` — so the two animations never see each other. - Click tabs across both strips: the underline always slides within its own strip. Try removing the ` ` wrappers locally and the underline will jump across the page on every click. ### Source #### Default.svelte Source file: [src/lib/examples/layout-group/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/layout-group/demos/Default.svelte) ```svelte
// group a tab {selectedA}
{#each tabs as id (id)} {/each}
// group b tab {selectedB}
{#each tabs as id (id)} {/each}
```