Beta Status

This library is still in early beta and the API is subject to change and may get daily breaking changes. If the docs and the package disagree, prefer the package and open an issue on GitHub or send a pull request with a fix.

Gestures

Gesture props give you hover, tap, focus, in-view, and pan state on motion components.

Props

  • whileHover: target object | variant label | string[]
  • onHoverStart: () => void
  • onHoverEnd: () => void
  • whileTap: target object | variant label | string[]
  • onTapStart: (event, info) => void
  • onTap: (event, info) => void
  • onTapCancel: (event, info) => void
  • globalTapTarget: boolean
  • whileFocus: target object | variant label | string[]
  • whileInView: target object | variant label | string[]
  • viewport: { root?: Element | Document | null; once?: boolean; margin?: string; amount?: "some" | "all" | number }
  • onViewportEnter: (entry) => void
  • onViewportLeave: (entry) => void
  • onPanSessionStart: (event, info) => void
  • onPanStart: (event, info) => void
  • onPan: (event, info) => void
  • onPanEnd: (event, info) => void

Notes

  • viewport.root takes a direct Element or Document reference in Solid.
  • Pan callback info includes point, delta, offset, and velocity.
  • Gesture precedence is drag, pan, tap, then hover.

Example

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  onTap={() => console.log("tap")}
/>
Gestures