Examples
Explore practical examples demonstrating Mercury's capabilities.
These examples illustrate the versatile animations achievable with Mercury. Many are adapted from Matt Perry’s Motion library, showcasing Mercury’s compatibility with reliable, battle-tested animations.
Important note
While the animations have been adapted to Svelte with Mercury, only examples from Motion’s free tier have their source code here, to respect their premium content. For access to exclusive animations and source code, consider subscribing to Motion+. You are encouraged to subscribe and replicate their advanced examples in Svelte using Mercury for practice.
Basic Animation Source
Bouncing Easing Source
Color Interpolation Source
Exit Animation Source
Stagger Source
Advanced Dialogue Motion+
Animated Navbar Motion+
Copy Button Motion+
CSS Spring Source
Drag Source
Feedback Popover Motion+
Flip Source
Flip Size Source
Gooey Button Motion+
Hover Source
Interactive Graph Motion+
Layout Animate Source
Layout Position Source
Flip Array Source
Layout ID Source
Layout ID Cards Motion+
Scroll Source
Tap Source
Variants Source
Slideshow Source
Drag Controls Source
Scroll Progress Source
Focus Source