TypeScript Component
Gesture Handler
Detect and respond to touch gestures including taps, swipes, pinches, and rotations. Works with both touch devices and mouse input.
Interactive Demo
Touch/Mobile: Use one finger to tap or swipe, two fingers to pinch.
Desktop: Click to tap, click and drag to swipe.
←
→
↑
↓
Touch or Click Here
Try tapping, swiping, or pinching
Tap detected!
0
Taps
0
Swipes
0
Pinches
—
Last Direction
INIT
Gesture handler ready
Supported Gestures
👆 Tap
Single touch/click without movement. Fires onTap callback.
👋 Swipe
Touch and drag in any direction. Detects left, right, up, down.
🤏 Pinch
Two-finger pinch gesture. Returns scale factor for zoom effects.
🔄 Rotate
Two-finger rotation gesture. Returns angle for rotation effects.
Usage
TouchGestureHandler
import { TouchGestureHandler } from 'move.gl';
const gesture = new TouchGestureHandler('myElement', {
onTap: () => console.log('Tapped!'),
onSwipe: (direction, deltaX, deltaY) => {
console.log(`Swiped ${direction}`);
},
onPinch: (scale) => console.log(`Scale: ${scale}`)
});
GestureCallbacks Interface
interface GestureCallbacks {
onTap?: () => void;
onSwipe?: (direction: SwipeDirection, deltaX: number, deltaY: number) => void;
onPinch?: (scale: number) => void;
onRotate?: (angle: number) => void;
}
type SwipeDirection = 'left' | 'right' | 'up' | 'down';