Gesture functions

These are pure functions over coordinates. They attach nothing to the DOM, which is why swiperia-core runs anywhere JavaScript does.

npm install swiperia-core

All of them take Vector2 points — [x, y] tuples.

movement

movement(source: Vector2, target: Vector2, duration: number): MovementEvent

Computes everything about a gesture in one call and returns a MovementEvent. duration is in milliseconds.

import { movement } from 'swiperia-core';

movement([0, 0], [100, 50], 200);
// {
//   source: [0, 0], target: [100, 50],
//   deltaX: 100, deltaY: 50, absX: 100, absY: 50,
//   direction: 'right', velocity: 0.559, vxvy: [0.5, 0.25], distance: 111.8
// }

direction

direction(a: Vector2, b: Vector2): SwipeDirection | null

The dominant axis of travel. The larger absolute delta wins; a tie resolves to the vertical axis. Returns null when the two points are identical.

direction([0, 0], [100, 50]); // 'right'
direction([0, 0], [50, 100]); // 'down'
direction([5, 5], [5, 5]); // null

The y axis points down, as it does in the DOM: a larger y means the user swiped down.

distance

distance(a: Vector2, b: Vector2): number

Straight-line distance between the points, in pixels.

distance([0, 0], [3, 4]); // 5

velocity

velocity(a: Vector2, b: Vector2, dt: number): number

Distance divided by dt — speed, with no direction. Returns Infinity when dt is 0, and throws when dt is negative.

velocity([0, 0], [3, 4], 2); // 2.5

vxvy

vxvy(a: Vector2, b: Vector2, dt: number): Vector2

Velocity per axis as [vx, vy], keeping the sign so you can tell direction from it. Returns [Infinity, Infinity] when dt is 0, and throws when dt is negative.

vxvy([0, 0], [3, 4], 2); // [1.5, 2]