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

Mercury is a Svelte animation library using AnimeJS under the hood. 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) {
        hover(element, (element, startEvent) => {
            params.onHoverStart?.(startEvent);
            let animation;
            if (params.whileHover) {
                animation = motionAnimate(element, params.whileHover, mapTransitionToMotion(params.whileHover?.transition));
            }
            return (endEvent) => {
                params.onHoverEnd?.(endEvent);
                if (params.whileHover && animation) {
                    animation.speed = -1;
                    animation.play();
                }
            };
        });
    }
};