Pointer

Outputs the screen position of a single mouse or touch point.

Import

import { pointer } from 'popmotion';

Usage

Absolute position

pointer()
  .start(({ x, y }) => console.log(x, y));

Relative position

Provide initial x and y properties to output pointer movement applied to this initial point.

This is useful for dragging motion.

pointer({ x: 200, y: 175 })
  .start(({ x, y }) => console.log(x, y));

Reactions are provided the following pointer data:

• x, y: Alias of clientX / clientY, or
• clientX, clientY: Position relative to the viewport.
• pageX, pageY: Position relative to the document.

Props

• preventDefault: boolean = true
• x?: number: If defined, apply pointer y movement to this number.
• y?: number: If defined, apply pointer y movement to this number.

Methods

Action methods

pointer() returns:

• filter((v: any) => boolean): Returns a new action that filters out values when the provided function returns false.
• pipe(...funcs: Array<(v) => v): Returns a new action that will run update values through this sequence of functions.
• start(update | { update, complete }): Starts the action and returns a subscription.
• while((v: any) => boolean): Returns a new action that will complete when the provided function returns false.

Subscription methods

pointer().start() returns:

• stop(): void

Example