Gesture

Motion provides a set of gesture controls that allow you to create interactive animations.

Hover

Motion provides a hover prop that allows you to animate the element when the mouse hovers over it.

Hover event

hoverStart

Callback function that fires when the mouse hovers over the element. Provided the triggering MouseEvent.

  <Motion
    @hover-start="(event)=>console.log('hover start', event)"
  />

hoverEnd

Callback function that fires when the mouse leaves the element. Provided the triggering MouseEvent.

  <Motion
    @hover-end="(event)=>console.log('hover end', event)"
  />

Press

The Press gesture control allows you to animate the element when the mouse is pressed.

Press event

pressStart

Callback function that fires when a pointer starts pressing the component. Provided the triggering PointerEvent.

  <Motion
    @press-start="(event)=>console.log('press start', event)"
  />

press

Callback function that fires when a pointer is stops pressing the component and the pointer is still over the component. Provided the triggering PointerEvent.

  <Motion
    @press="(event)=>console.log('press', event)"
  />

pressCancel

Callback function that fires when a pointer stops pressing the component and the pointer is no longer over the component. Provided the triggering PointerEvent.

  <Motion
    @press-cancel="(event)=>console.log('press cancel', event)"
  />

Focus

The focus gesture detects when a component gains or loses focus, following the same rules as the CSS selector.

You can use @focus and @blur events, or the focus prop to animate when a component has focus. For example:

<Motion
  focus="{ scale: 1.2 }"
  href="#"
/>

Prop	Default	Type
`drag`	`false`	`boolean \| 'x' \| 'y'` Enable dragging for this element. Set to `false` by default.
`dragSnapToOrigin`	`false`	`boolean` If `true`, this will snap back to its origin when dragging ends.
`dragDirectionLock`	`false`	`boolean` If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`.
`dragPropagation`	`false`	`boolean` Allows drag gesture propagation to child components. Set to `false` by default.
`dragConstraints`	`false`	`false \| Partial<BoundingBox> \| HTMLElement` The drag constraints. Set to `false` by default.
`dragElastic`	`0.5`	`boolean \| number \| Partial<BoundingBox>` The drag elasticity. Set to `0.5` by default.
`dragMomentum`	`true`	`boolean` Apply momentum from the pan gesture to the component when dragging finishes. Set to `true` by default.
`dragTransition`		`InertiaOptions` The drag transition. Set to `undefined` by default.
`dragListener`	`true`	`boolean` By default, if `drag` is defined on a component then an event listener will be attached to automatically initiate dragging when a user presses down on it. Set to `true` by default.
`dragControls`		`DragControls` A drag controls object.
`onDragStart`		`(event: PointerEvent, info: PanInfo) => void` Callback function that fires when dragging starts. Provided the triggering `PointerEvent` and `PanInfo`.
`onDrag`		`(event: PointerEvent, info: PanInfo) => void` Callback function that fires when dragging. Provided the triggering `PointerEvent` and `PanInfo`.
`onDragEnd`		`(event: PointerEvent, info: PanInfo) => void` Callback function that fires when dragging ends.
`dragDirectionLock`		`(axis: 'x' \| 'y') => void` Callback function that fires when the drag direction is locked to the x or y axis.
`onDragTransitionEnd`		`() => void` Callback function that fires when drag momentum/bounce transition finishes.
`onMeasureDragConstraints`		`(constraints: BoundingBox) => BoundingBox \| void` If `dragConstraints` is set to a React ref, this callback will call with the measured drag constraints.

Reorder

Layout

On This Page

Gesture

Hover

Hover event

Press

Press event

Focus

Pan

Drag

Drag with constraints

Drag Props