Swipe Gesture
A touch-based directional motion for navigating carousels, revealing hidden actions, or dismissing items.
Plain English
Swipe is one of the most efficient mobile interactions, but it is invisible — users will never discover it unless you show a hint. For carousels and image galleries, peek a sliver of the next card so users see there is more. For swipe-to-reveal actions (like iOS Mail's swipe-left for delete), show a visual hint on first load. Three distinct patterns exist: horizontal swipe for navigation (next/previous), swipe-to-reveal for hidden actions, and swipe-to-dismiss for notifications and cards. Each has a different threshold distance (30–80px) before the action commits.
Technical
Track touchstart (save x, y), touchmove (calculate delta), touchend (commit or cancel). Threshold: commit action if |deltaX| > 60px, else spring back. Horizontal: use touch-action: pan-y to allow vertical scroll while capturing horizontal swipe. CSS transition: transform 300ms ease-out on the element. On commit, animate translateX(-120%) or translateX(120%) then remove from DOM. Spring-back: transition to translateX(0). Pointer events API works across both touch and mouse.
Live Demo
Swipe gesture
✉ 5 remainingAlex M.
Sent you a message
Always show a visual hint — users won't discover swipe unless they see an affordance.
Usage
✓ Good usage
An inbox where swiping a message left reveals a red delete zone, and releasing past 60px deletes it with a slide animation — fast for power users.
✗ Bad usage
A settings page where every option is swipe-to-access with no visible affordance — users discover actions only by accident.
Recommended values
- Commit threshold: 60–100px
- Spring-back transition: 250ms ease-out
- Dismiss animation: 300ms ease-in
- touch-action: pan-y for horizontal swipe containers
- Action peek width: 80–100px
- Min velocity for dismiss: 0.5px/ms
Common mistakes
- No affordance — users do not discover swipe without a peek, hint text, or onboarding tooltip.
- Missing touch-action: pan-y — horizontal swipe hijacks vertical scroll throughout the whole page.
- Same threshold on fast and slow swipes — velocity should lower the threshold on fast flicks.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add swipe-to-delete to the notification list. Slide the card left to reveal a red "Delete" zone. If the user releases past 60px, animate the card off-screen and remove it. If released before 60px, spring back to center. Show a hint animation on first load swiping 20px left then back to suggest the gesture exists.