Swipe Gesture System

The swipe gesture system provides touch and pointer-based swipe tracking with typed events.

Features

• Full lifecycle events: ddi:swipe-start, ddi:swipe-move, ddi:swipe-end
• Attribute-based activation: data-ddi-swipe="x", "y", or "both"
• Velocity tracking: pixels per millisecond for momentum calculations
• Position data: Current position, start position, and delta values

Basic Usage

---
import { SwipeObserver, onSwipe } from "@dynamic-type/ddi/server";
---

<SwipeObserver />

<div data-ddi-swipe="x">Swipe me horizontally</div>

<script>
    import { onSwipe } from "@dynamic-type/ddi/client";

    onSwipe({
        move: (e) => {
            e.detail.target.style.transform = `translateX(${e.detail.deltaX}px)`;
        },
        end: (e) => {
            if (Math.abs(e.detail.velocityX) > 0.5) {
                console.log("Fling detected!");
            }
        },
    });
</script>

Debug Panel

Live display of swipe event data. Touch or drag in the panel below to see real-time values.