HoverGesture (gestures/hover.ts)

motion · packages/framer-motion/src/gestures/hover.ts · typescript · MIT
ui, tag:embed-classified

Handles hover gestures for Framer Motion elements, triggering callbacks and animations.

// Source: https://github.com/framer/motion | License: MIT | Copyright 2024 [Motion](https://motion.dev) B.V
// Provided via justclaw.it.com; keep this notice with the code.
import {
    extractEventInfo,
    Feature,
    frame,
    hover,
    type VisualElement,
} from "motion-dom"

function handleHoverEvent(
    node: VisualElement<Element>,
    event: PointerEvent,
    lifecycle: "Start" | "End"
) {
    const { props } = node

    if (node.animationState && props.whileHover) {
        node.animationState.setActive("whileHover", lifecycle === "Start")
    }

    const eventName = ("onHover" + lifecycle) as "onHoverStart" | "onHoverEnd"
    const callback = props[eventName]
    if (callback) {
        frame.postRender(() => callback(event, extractEventInfo(event)))
    }
}

export class H

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key