Skip to main content

LayoutGroup

Group components so they measure and animate layout together.

Components measure their own layout when they re-render. LayoutGroup makes a set of components re-measure together, so a change in one animates its siblings correctly — and it namespaces layoutId so shared layout animations don't collide.

		<script>
	import { motion, LayoutGroup } from "motion-start";
 
	let selected = $state("spring");
</script>
 
<LayoutGroup>
	{#each tabs as tab (tab)}
		<button onclick={() => (selected = tab)}>
			{#if selected === tab}
				<motion.span layoutId="pill" />
			{/if}
			{tab}
		</button>
	{/each}
</LayoutGroup>

Props

Prop Type Description
id string Namespace for layoutIds within the group, so repeated groups don't share elements.
inherit boolean | "id" Whether to inherit the parent group's id. false isolates the group.

Namespacing

When the same component is rendered more than once — an accordion, a list of cards — give each instance its own id so their layoutIds stay distinct.

		{#each groups as group (group.id)}
	<LayoutGroup id={group.id}>
		<Accordion items={group.items} />
	</LayoutGroup>
{/each}