logo svelte /motion v0.9.3
FIG-001/ LAYOUTID

sliding indicator.

An accent indicator slides between tabs on every click. Only the active tab renders one; sharing a layoutId lets motion animate the indicator across tab boundaries instead of mount-unmount-flash.

  • The indicator only renders inside the active tab's <li>. As selectedTab changes, the old indicator unmounts and the new one mounts — sharing layoutId="selected-indicator" tells motion to animate from the old position to the new one instead of fading out / in.
  • <AnimatePresence> wraps the conditional render so motion gets a chance to coordinate the handoff. Without it the indicator would still animate position, but the mount/unmount lifecycle wouldn't have a clean exit window.
  • Each tab button stacks two gesture props — whileTap for press feedback and whileFocus for keyboard navigation. Plain object form on both; nothing fancier needed.
↩ all examples
pattern · layoutId-indicator mode · live running source
// tab-select tab: home
layoutId: selected-indicator spring: 500 / 30
category · layoutid
sheet · sheet 01 / 01
⟳ to re-run

Tab Select