Interface PanHandlers

Callback function that fires when the pan gesture is recognised on this element.

Note: For pan gestures to work correctly with touch input, the element needs touch scrolling to be disabled on either x/y or both axis with the touch-action CSS rule.

function onPan(event, info) {
  console.log(info.point.x, info.point.y)
}

<motion.div onPan={onPan} />
Copy

Callback function that fires when the pan gesture ends on this element.

function onPanEnd(event, info) {
  console.log(info.point.x, info.point.y)
}

<motion.div onPanEnd={onPanEnd} />
Copy

Callback function that fires when we begin detecting a pan gesture. This is analogous to onMouseStart or onTouchStart.

function onPanSessionStart(event, info) {
  console.log(info.point.x, info.point.y)
}

<motion.div onPanSessionStart={onPanSessionStart} />
Copy

Callback function that fires when the pan gesture begins on this element.

function onPanStart(event, info) {
  console.log(info.point.x, info.point.y)
}

<motion.div onPanStart={onPanStart} />
Copy