Pointer

Creates a composite action that tracks the x and y movement of touch and mouse events.

pointer(e <MouseEvent | TouchEvent>, props <Object>)

import { pointer } from 'popmotion';

Click “start” and then click and drag around the page.

const counter = document.querySelector('#a .counter');
let pointerTracker;

function startTracking(e) {
	pointerTracker = pointer(e, {
		onUpdate: ({ x, y }) => counter.innerHTML = 'x: ' + x + ' y: ' + y
	}).start();
}

function stopTracking() {
	if (pointerTracker) pointerTracker.stop();
}

document.addEventListener('mousedown', startTracking);
document.addEventListener('touchstart', startTracking);
document.addEventListener('mouseup', stopTracking);
document.addEventListener('touchend', stopTracking);
0

Props

  • preventDefault <Boolean>: If true, fire preventDefault on mousemove or touchmove events (default true) …Action

Methods

…Action