Shared Layout Animation | Svelte Motion

FIG-001/ LAYOUTID

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.

Each tab conditionally renders its own <motion.div layoutId="underline" /> 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.

↩ all examples

pattern · layoutId tab indicator mode · live running source

🍅

category · layoutid

sheet · sheet 01 / 01

⟳ to re-run