Skip to main content

Getting Started

Seamlessly integrate your favorite animation libraries (Motion, AnimeJS, GSAP) into your Svelte projects using Mercury.

The following guide will walk you through the process of installing Mercury.

Installation

You can easily install Mercury with npm or your preferred package manager:

		npm install @omicrxn/mercury
	

Animating Elements

Mercury leverages Svelte Attachments to provide intuitive animation handling. Here’s a basic example demonstrating its usage:

Explanation

  • {@attach mercury()}: Attaches Mercury’s animation functionality to your element.
  • animate: { scale: 1 }: Defines the target scale of the element, animating it to its full size.
  • transition: { ease: 'circInOut', duration: 1 }: Configures the animation with a smooth easing function (circInOut) and a duration of 1 second.