Gestures
Mercury introduces gesture-based animations for interactive elements, such as hover effects, drag interactions, and taps.
<div
use:mercury={{
hover: { scale: 1.1 },
tap: { scale: 0.9 },
drag: true
}}
>
Gesture-Based Animation
</div>
Supported Gestures
Hover
Animations triggered when the user hovers over the element.
whileHover: { scale: 1.1, rotate: 10 }
Tap
Animations triggered on a tap or click interaction.
whileTap: { scale: 0.9 }
Drag
Enables drag interactions for the element. Optionally, you can define drag constraints.
whileDrag: { scale: 1.1, rotate: 10 }
Focus
whileFocus: { scale: 1.1, rotate: 10 }