Presence Animations

Presence animations allow you to handle entry and exit animations for elements being added or removed from the DOM.

Syntax

To use exit animations Mercury uses the built-in Svelte transitions functionality. To make an element have presence, you must add the out:animateExit attribute. You can add inside the out:animateExit directive any parameter that you can use to the use:mercury action like animate and transition.

{#if isVisible}
  <div
    use:mercury={{
    animate:{scale:2}
    }}
    out:animateExit={{
    animate:{opacity:0, scale:0.5}
    }}
  >
    Presence Animation
  </div>
{/if}

Example


<script lang="ts">
	import Button from '$lib/components/ui/button/button.svelte';
	import { animateExit, mercury } from '@omicrxn/mercury';
	let show = true;
	const onclick = () => {
		show = !show;
	};
</script>

<div class="flex flex-col gap-2">
	{#if show}
		<div
			class="h-16 w-16 rounded-md bg-blue-300"
			use:mercury={{ initial: { opacity: 0, y: -25 }, animate: { opacity: 1, y: 0 } }}
			out:animateExit={{
				animate: { opacity: 0, y: -25 },
				transition: { duration: 0.3 }
			}}
		></div>
	{/if}
	<Button {onclick}>Hide</Button>
</div>