What is Mercury?

Mercury is a Svelte animation library that provides a declarative syntax for widely-used JavaScript animation libraries like Motion, AnimeJS, and (soon) GSAP. Mercury goes beyond traditional animation capabilities by introducing extra functionality such as Layout Animations and Gestures, offering an enhanced animation experience tailored for Svelte developers.

Why Mercury?

Mercury was born out of a need for a reliable, well-maintained animation library for Svelte. While some options exist, they often fall short, either due to lack of active development or limited utility. Turning to Vanilla JS libraries like AnimeJS and GSAP revealed their strengths—but also a key challenge: their imperative syntax can feel at odds with Svelte’s declarative, component-driven philosophy.

At the same time, popular libraries like Framer Motion, widely used in React, offer powerful features like layout animations and gesture-based interactions. Recognizing the gap in the Svelte ecosystem, Mercury started as a Framer Motion-inspired library for Svelte but quickly evolved to become more.

What Makes Mercury Unique?

Mercury stands out for its ability to bring powerful animations to Svelte while keeping the experience fully aligned with Svelte’s natural programming model. Here’s how:

  • No External Components: Unlike libraries that introduce their own components like motion.div or motion.span, Mercury leverages Svelte actions and built-in features. This ensures:

    • Native Element Usage: You can animate plain HTML elements directly without wrapping them in custom components.
    • Component Agnosticism: You can add Mercury’s animations to elements in your own components, maintaining complete control over your component structure.

  • Declarative Syntax: Simplifies animations to align with Svelte’s intuitive framework.

  • Engine Agnostic: Choose the best animation library for your needs—whether it’s Motion, AnimeJS, or (coming soon) GSAP—without sacrificing advanced functionality.

  • Advanced Features: Enjoy features like layout animations, gesture-based animations, and more, previously unavailable in Svelte.

By avoiding the need for external components, Mercury empowers developers to work directly with elements, leveraging Svelte’s full power while keeping animations intuitive and lightweight.

Mercury provides the best of both worlds: the flexibility of industry-leading animation libraries and the simplicity of a declarative Svelte-first API.