Trigger by the action's weight

Fire light actions mid-swipe; make destructive ones wait for release.

Rauno Freibergrauno.me
Lightweight actions, such as displaying overlays, feel more natural to trigger during the swipe after an arbitrary amount of distance.
Invisible Details of Interaction DesignRead article ↗
Rauno Freibergrauno.me
Dismissing an app is destructive, and it wouldn't feel nice if the app were to dismiss in the middle of the swipe.
Invisible Details of Interaction DesignRead article ↗

Two demos: deleting by swipe, and pulling down a search overlay.

1 · A destructive swipe

Drag the card up. Or focus it and press Delete.

Deletes mid-dragBad
Firesat 60px, finger downIdle
Deletes on releaseGood
Fireson release past 80pxIdle
onPointerMove: card.style.translate = `0 ${dy}px`;   // 1:1, never commits here
onPointerUp:   if (dy < -80 || vy < -0.11) remove(card); // distance or velocity
               else springBack(card);                   // dragging back cancels

2 · A light overlay

Pull the feed down 40px. Or tap Search.

Opens on releaseBad
Fireswhen you let goIdle
Opens mid-dragGood
Firesat 40px, finger downIdle
onPointerMove: if (dy > 40 && !open) openSearch();   // light: no need to wait
onPointerUp:   settle();                              // the finger just lets go

Why it matters, pros and cons

Why it matters

Overlays are cheap to undo. Deletes are not, so the finger gets the final say.

Pros

  • Light actions feel instant: they answer as soon as you clearly moved.
  • Destructive ones can be cancelled by dragging back before you let go.
  • The thing under your finger never vanishes while you are still holding it.

Cons

  • Mid-drag triggers can fire by accident for a shaky or slow hand.
  • Release-to-commit needs a clear cue, or people will not know it is armed.
  • Very cheap actions may not need a gesture at all.