Skip to content
Esc
↑↓navigate↵open⌘Jpreview

← All examples

Basic Animation

Source code

<script lang="ts">
	import { mercury, type AnimationInstance } from '@omicrxn/mercury';
	let { animation = $bindable() }: { animation?: AnimationInstance } = $props();
</script>

<div class="flex flex-col gap-4 justify-center items-center w-full h-full">
	<div
		class="box"
		style="transform: scale(0.4);"
		{@attach mercury({
			animate: { scale: 1 },
			instance: (instance)=>{
			  animation = instance
			},
			transition: { ease: 'circInOut', duration: 1, autoplay: true }
		})}
	></div>
</div>