@omicrxn/mercury NPM

Mercury

Mercury is a Svelte animation library offering a declarative syntax for popular JavaScript animation tools like AnimeJS, Motion, and (soon) GSAP. Unlike other libraries, Mercury avoids custom components, using Svelte actions for native element animations. It’s engine-agnostic, allowing developers to choose their preferred animation library without compromising functionality. Mercury allows for seamless integration with existing Svelte features like transitions, actions, and motion, while eliminating the need for wrapper components. It also introduces layout animations and exit animations inspired by Framer Motion, all while keeping a clean and svelte-friendly syntax.

Documentation

See in-depth documentation and examples at this site

Working Demo / Examples

Check some examples of how to use Mercury

Features

Choose your sauce: You can opt in to your preferred animation library such as Motion, AnimeJS or GSAP. Feel free to submit new cores for Mercury through issues.
Supports layout animations
Allows exit animations
Simple, expressive Svelte syntax using use:mercury
No wrapper components, all animations applied directly to DOM elements
Works with all Svelte features for the DOM like transitions, actions, and motion, which also allows for direct binding to the element
Event animations like whileHover, whileClick, etc.

Installation

npm install @omicrxn/mercury

pnpm install @omicrxn/mercury

yarn install @omicrxn/mercury

Usage

<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>

Acknowledgments

Mercury is built on the shoulders of giants. Special thanks to the creators and maintainers of Svelte, Anime.js, Motion and GSAP and special thanks to @Char2sGu for helping me integrate layout projections into the library.