Overview

Layout animations enable you to animate properties and scenarios typically not supported by standard CSS animations. While standard animations effectively animate individual properties like opacity or scale, they can’t handle structural changes—such as switching flex-direction, updating grid-template-columns, or smoothly animating between two separate elements. Mercury’s layout animations effortlessly manage these complex cases.

Basic Usage

Use Mercury’s layout attachment independently or along the main Mercury attachment:

		<div style="justify-content: {justify};">
	<div
		{@attach layout({ track: () => justify })}
		class="box h-16 w-16 rounded-md border border-slate-500 bg-blue-200"
	/>
</div>
<button
	onclick={() => {
		flip(); //this toggles the parent element between justify-start and justify-end
	}}
	class="bg-slate-200">Flip</button
>
	

Layout ID (Shared Layout Animations)

To animate between two different elements, use the same layoutId in Mercury’s layout attachment. This smoothly transitions one element to another when state changes:

		{#if toggle}
	<div
		bind:this={smallBox}
		{@attach layout({ layoutId: 'test', track: () => toggle })}
		class="box h-16 w-16 rounded-md border border-slate-500 bg-blue-200"
	></div>
{:else}
	<div
		bind:this={bigBox}
		{@attach layout({ layoutId: 'test', track: () => toggle })}
		class="box h-24 w-24 rounded-md border border-slate-500 bg-blue-200"
	></div>
{/if}
	

Both elements share the layoutId (test), enabling seamless and visually appealing transitions between the states.