# Shared Layout Animation
> Animate elements between positions using layoutId for smooth shared layout transitions in Svelte Motion.
**Source:** [https://motion.svelte.page/examples/shared-layout-animation](https://motion.svelte.page/examples/shared-layout-animation)
**Markdown mirror:** [https://motion.svelte.page/examples/shared-layout-animation.md](https://motion.svelte.page/examples/shared-layout-animation.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: shared layoutId.
Each tab renders its own underline `motion.div`, but they all share `layoutId="underline"`. When one mounts as another unmounts, motion treats them as the same element and tweens between positions.
**Metadata:** tag: `LAYOUTID` | pattern: `layoutId tab indicator`
### Notes
- Each tab conditionally renders its own ` ` when active. The shared `layoutId` tells motion these are the same element — it measures the outgoing rect, mounts the new one, and tweens between them with a spring.
- The content area uses `AnimatePresence mode="wait"`: the previous emoji exits fully before the next one enters, so the two never overlap during the swap.
- The tabs themselves animate their `backgroundColor` via `animate={'{ backgroundColor: … }'}` — no variants needed because each cell decides its own state from `selectedTab`.
### Source
#### Default.svelte
Source file: [src/lib/examples/shared-layout-animation/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/shared-layout-animation/demos/Default.svelte)
```svelte