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

sliding indicator.

A pink 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
category · layoutid
sheet · sheet 01 / 01
⟳ to re-run