@omicrxn/mercury/dist/mercury/gestures/hover.js

Mercury is a Svelte animation library powered by Motion. It simplifies complex animations with Svelte actions, provides layout and exit animations, and integrates seamlessly with Svelte features.

import { hover, animate as motionAnimate, } from 'motion';
import { mapTransitionToMotion } from '../utils.js';
export const handleHover = (element, params) => {
    if (params?.whileHover || params?.onHoverStart || params?.onHoverEnd) {
        return hover(element, (element, startEvent) => {
            params.onHoverStart?.(startEvent);
            let animation;
            if (params.whileHover) {
                const { transition, ...keyframes } = params.whileHover;
                animation = motionAnimate(element, keyframes, mapTransitionToMotion(transition));
            }
            return (endEvent) => {
                params.onHoverEnd?.(endEvent);
                if (params.whileHover && animation) {
                    animation.speed = -1;
                    animation.play();
                }
            };
        });
    }
};