Swipe

Manages swipe interactions:

• Tracks pointer movement and detects direction
• Emits events on start, move, and end
• Supports inertia-based movement with easing
• Calculates rotation
• Does not apply transforms — only provides computed coordinates
• Does not store state after swipe ends (movement always resets)

Basic Demo

More demos

To explore more demos, click here.

Initialization

caution

• Swipe does not transform elements — it only computes movement values.
• Swipe does not persist any state after swipe completion (all coordinates reset).
• Inertia is optional and triggers only if the calculated distance exceeds the threshold.

import { Swipe } from "vevet";

const swipe = new Swipe(
  {
    container: document.getElementById("container"),
    grabCursor: true
  },
  {
    onMove: ({ diff }, { container }) => {
      container.style.transform = `translate(${diff.x}px, ${diff.y}px)`;
    },
    onEnd: (data, { container }) => {
      container.style.transform = "none";
    }
  }
);

Detect direction:

swipe.on("toLeft", () => console.log("swipe to left"));

Add inertia:

import { Swipe } from "vevet";

const swipe = new Swipe({
  container: document.getElementById("container"),
  inertia: true,
});

Destroy all events:

swipe.destroy();