Layout Animations

Mercury supports layout animations, allowing elements to animate their position, size, and layout changes seamlessly. To use it you must mark elements subjective to layout change with the layout attribute.

<script lang="ts">
	import { mercury } from '@omicrxn/mercury';
	let justify = $state('justify-start');
	const onclick = () => {
		justify = justify === 'justify-start' ? 'justify-end' : 'justify-start';
	};
</script>

<div class="flex w-[120px] {justify} gap-2 rounded-full bg-blue-200 px-4 py-2" use:mercury layout>
	<div {onclick} class="h-12 w-12 rounded-full bg-blue-300" use:mercury layout></div>
</div>
  

Layout IDs

By assigning the same layout value to different elements, you can create connections between them for smooth transitions.

<div use:mercury layout="uniqueId"></div>

Common error

It is a common error to add the layout directive alone. But you MUST use it with the mercury action applied to the element: use:mercury.

Wrong

<div layout="uniqueId"></div>

Right

<div use:mercury layout="uniqueId"></div>