# Animated Tabs
> Spring-based animated tabs with a sliding indicator powered by svelte-motion layoutId and bits-ui.
**Source:** [https://motion.svelte.page/examples/animated-tabs](https://motion.svelte.page/examples/animated-tabs)
**Markdown mirror:** [https://motion.svelte.page/examples/animated-tabs.md](https://motion.svelte.page/examples/animated-tabs.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: animated tabs.
A shared `layoutId` on the active indicator slides it between tab triggers with spring physics. State management stays on bits-ui; animation stays on svelte-motion.
**Metadata:** tag: `LAYOUTID` | pattern: `tabs-sliding-indicator`
### Notes
- The active-tab indicator carries a shared `layoutId` across all triggers — when the active tab changes, motion animates the indicator from the old position to the new one.
- Tab content fades through `AnimatePresence` so switching panels reads as a state change, not a hard cut.
- Composed on top of bits-ui's `Tabs.Root` — bits-ui owns the state machine + keyboard accessibility, svelte-motion owns the animation. Add `animated={false}` on the root to fall back to vanilla shadcn behaviour.
### Source
#### Default.svelte
Source file: [src/lib/examples/animated-tabs/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/animated-tabs/demos/Default.svelte)
```svelte
AccountPasswordSettings
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Settings
Configure your preferences and notification settings.