Getting Started

Mercury is an animation library for Svelte. For further information read About Mercury.

Installation

To get started with Mercury, you can install it using npm or your favorite package manager.

npm install @omicrxn/mercury

Animate an element

Mercury leverages Svelte Actions for animations. Here’s a basic example:

<script lang="ts">
		import { mercury } from '@omicrxn/mercury';
</script>

<div class="h-16 w-16 rounded-md bg-blue-300"
	use:mercury={{
		initial: { scale: 0.5 },
		animate: { scale: 1.5 },
		transition: { ease: 'circInOut', duration: 1 }
	}}
></div>
  

Explanation:

• use:mercury: This applies Mercury’s animation logic to the element.
• initial: { scale: 0.5 }: The element starts with a scale value of half the original.
• animate: { scale: 1.5 }: The element scales to 1.5 its size during the animation.