Class Swipe

Manages swipe interactions:

  • Tracks movement and detects direction
  • Emits events on start, move, and end
  • Supports exponential inertia
  • Optional bounds with rubber-band overflow and bounce-back

Gesture lifecycle

Pointers.start → window move samples → pending (threshold) → start / move → end → direction → inertia or bounce.

If the threshold is never crossed, start and end are not emitted.

Coordinate spaces

  • Pointer space — start, prev, current, diff, step, accum
  • Movement space — movement, prevMovement, scale (after rubber / snap)

Does not transform elements — only computes coordinates.

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get accum(): ISwipeVec3

    Absolute path length since swipe start.

    Returns ISwipeVec3

  • get container(): HTMLElement | SVGElement

    Coordinate reference element.

    Returns HTMLElement | SVGElement

  • get coords(): ISwipeCoords

    Full coordinate snapshot (pointer space + movement).

    Returns ISwipeCoords

  • get current(): ISwipeState

    Current pointer position.

    Returns ISwipeState

  • get diff(): ISwipeState

    Offset from swipe start to current pointer position.

    Returns ISwipeState

  • get hasBounce(): boolean

    Whether overflow bounce-back timeline is running.

    Returns boolean

  • get hasInertia(): boolean

    Whether release inertia is running.

    Returns boolean

  • get isDestroyed(): boolean

    Indicates whether the instance has been destroyed.

    After destruction, destroy is a no-op.

    Returns boolean

  • get isSwiping(): boolean

    Whether a swipe gesture is in progress.

    Returns boolean

  • get movement(): ISwipeVec3

    Total displacement in movement space (use for element transforms).

    Returns ISwipeVec3

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

  • get prev(): ISwipeState

    Previous pointer position.

    Returns ISwipeState

  • get scale(): number

    Current scale modifier.

    Returns number

  • get start(): ISwipeState

    Pointer position at swipe start.

    Returns ISwipeState

  • get step(): ISwipeState

    Offset from previous to current pointer position.

    Returns ISwipeState

Methods

  • Adds prefixed classes to an element and removes them on destroy.

    Skips classes that are already present on the element.

    Parameters

    • element: Element

      Target DOM element.

    • ...classes: string[]

      Unprefixed class name segments.

    Returns void

  • Builds one or more prefixed class names.

    Parameters

    • ...classes: string[]

      Unprefixed class name segments.

    Returns string

    Space-separated prefixed class string.

  • Internal method to handle the destruction of the module. It removes all callbacks, destroys properties, and cleans up event listeners and class names.

    Returns void

  • Set default mutable props

    Returns {
        __mutableProp: true;
        axis: "x" | "y";
        bounceDuration: number;
        bounds: (coords: ISwipeCoords) => null | ISwipeAxes;
        canBounce: () => boolean;
        directionThreshold: number;
        edgeSwipeThreshold: number;
        enabled: boolean;
        grabCursor: boolean;
        inertia: boolean;
        inertiaBounceEase: number;
        inertiaDecay: number;
        inertiaDistanceModifier: (distance: ISwipeVec3) => null | ISwipeVec3;
        inertiaDistanceThreshold: number;
        inertiaDuration: (distance: number) => number;
        inertiaEasing: false | number[] | TEasingFunction;
        inertiaRatio: number;
        inertiaThreshold: number;
        maxVelocity: { angle: number; x: number; y: number };
        minTime: number;
        overflow: () => number;
        preventEdgeSwipe: boolean;
        preventTouchMove: boolean;
        ratio: number;
        recalculateBoundsOnInertia: boolean;
        relative: boolean;
        requireCtrlKey: boolean;
        snap: () => null | ISwipeAxes;
        snapRadius: number;
        threshold: number;
        velocityModifier: false | (velocity: ISwipeState) => ISwipeState;
        willAbort: (props: ISwipeCanMoveArg) => boolean;
    }

    • __mutableProp: true
    • axis: "x" | "y"

      Primary swiping axis.

      null
      
    • bounceDuration: number

      Duration of the bounce-back timeline when movement exceeds bounds and inertia does not run.

      250
      
    • bounds: (coords: ISwipeCoords) => null | ISwipeAxes

      Movement limits per axis. Unset axis is unbounded.

      null
      
    • canBounce: () => boolean

      Determines whether the swipe is allowed to bounce back.

      () => true
      
    • directionThreshold: number

      Minimum swipe distance (px) for directional callbacks.

      50
      
    • edgeSwipeThreshold: number

      Edge swipe threshold (px) from the left/right edge.

      20
      
    • enabled: boolean

      Enables or disables swipe events.

      true
      
    • grabCursor: boolean

      Shows "grab" and "grabbing" cursors during interaction.

      false
      
    • inertia: boolean

      Enables release inertia (RAF-based decay).

      false
      
    • inertiaBounceEase: number

      Easing factor for pulling inertia back inside bounds (per frame, FPS-independent).

      0.3
      
    • inertiaDecay: number

      Inertia velocity decay per frame (higher = stops sooner).

      0.05
      
    • inertiaDistanceModifier: (distance: ISwipeVec3) => null | ISwipeVec3

      Inertia distance modifier. Called when inertia distance is predicted but not yet started.

      null
      
    • inertiaDistanceThreshold: number

      Timelined inertia is not supported anymore.

    • inertiaDuration: (distance: number) => number

      Timelined inertia is not supported anymore.

    • inertiaEasing: false | number[] | TEasingFunction

      Timelined inertia is not supported anymore.

    • inertiaRatio: number

      Multiplier applied to release velocity.

      1
      
    • inertiaThreshold: number

      Minimum release speed to start inertia (px/s for x/y, deg/s for angle).

      1
      
    • maxVelocity: { angle: number; x: number; y: number }

      Max release velocity per axis (coord/ms for x/y, deg/ms for angle). Falsy axis value disables inertia on that axis.

      { x: 7, y: 7, angle: 3 }
      
    • minTime: number

      Minimum duration (ms) to trigger swipe move.

      0
      
    • overflow: () => number

      Rubber-band distance past bounds (px for x/y, degrees for angle).

      () => 50
      
    • preventEdgeSwipe: boolean

      Prevents edge swiping (iOS swipe-back gesture).

      false
      
    • preventTouchMove: boolean

      Prevents touchmove event.

      true
      
    • ratio: number

      Swipe movement scale.

      1
      
    • recalculateBoundsOnInertia: boolean

      Enable bounds recalculation when inertia is active

      true
      
    • relative: boolean

      Calculates coordinates relative to the container.

      false
      
    • requireCtrlKey: boolean

      Requires Ctrl key for swipe (mouse only).

      false
      
    • snap: () => null | ISwipeAxes

      Snap targets per axis in movement space.

      null
      
    • snapRadius: number

      Max distance to a snap target (same units as the axis). Falsy = no radius limit.

      null
      
    • threshold: number

      Minimum swipe distance (px) to trigger swipe start.

      5
      
    • velocityModifier: false | (velocity: ISwipeState) => ISwipeState

      Timelined inertia is not supported anymore.

    • willAbort: (props: ISwipeCanMoveArg) => boolean

      Returns true to abort before the swipe starts (after threshold / axis checks).

      () => false

  • Get default static props

    Returns {
        __staticProp: true;
        buttons: number[] | (type: TPointersType) => number[];
        container: HTMLElement | SVGElement;
        disableUserSelect: boolean;
        pointers: number | (type: TPointersType) => number;
        thumb: HTMLElement | SVGElement;
    }

    • __staticProp: true
    • buttons: number[] | (type: TPointersType) => number[]

      Determines which mouse buttons trigger events.

      • 0: Main button pressed, usually the left button or the un-initialized state
      • 1: Auxiliary button pressed, usually the wheel button or the middle button (if present)
      • 2: Secondary button pressed, usually the right button
      • 3: Fourth button, typically the Browser Back button
      • 4: Fifth button, typically the Browser Forward button

      See MouseEvent.button.

      [0]
      
    • container: HTMLElement | SVGElement

      Event listener container.

    • disableUserSelect: boolean

      Disable user selection on drag.

      true
      
    • pointers: number | (type: TPointersType) => number

      Required pointer count to activate swiping.

      1
      
    • thumb: HTMLElement | SVGElement

      An element that triggers the swipe start. Calculations remain relative to the container regardless of this element.

  • Method that is called when the module's properties mutate. In most cases, used to handle callbacks.

    Parameters

    Returns void

  • Recalculates movement bounds from the bounds prop.

    Returns null | ISwipeAxes

  • Stops overflow bounce animation.

    Returns void

  • Stops release inertia.

    Returns void

  • Destroys the instance and runs all registered cleanup actions.

    Safe to call multiple times; subsequent calls are ignored.

    Execution order:

    1. _destroy
    2. all onDestroy callbacks, in registration order
    3. isDestroyed is set to true

    Returns void

  • Registers a function to run when the instance is destroyed.

    If the instance is already destroyed, action runs immediately.

    Parameters

    • action: () => void

      Cleanup function (for example remove listeners or DOM classes).

    Returns void

  • Animates movement back inside bounds after overflow.

    Parameters

    • OptionaltargetDuration: number

    Returns void

  • Sets programmatic displacement in movement space. Reapplies rubber, snap, emits move, and cancels overflow bounce.

    Parameters

    Returns void

  • Sets programmatic scale in movement space. Optionally zooms toward an origin point and emits move.

    Parameters

    • value: number
    • origin: MouseEvent | ISwipeVec2 | TouchEvent

    Returns void