Swipe actions

iOS-style swipe actions where UI elements and animations respond dynamically to swipe progress. Actions trigger via taps or full swipes (for primary actions). A modern, space-efficient alternative to dropdown menus that keeps actions hidden behind the main item until revealed by a swipe gesture.

Time: 5 min
Difficulty: Advanced
Access: Motion+

BKMNJanuary 28, 2025

Introduction

The Swipe actions example shows how to implement an iOS-style swipe gesture interface where swiping an item left or right reveals contextual actions. This pattern is commonly used in mobile UIs for actions like archive, delete, or flag, providing a space-efficient alternative to having these actions permanently visible.

This tutorial explores several advanced Motion for React APIs:

useMotionValue to track the swipe position
useTransform to derive styles from the swipe amount
useSpring to add realistic physics to the animations
animate to manually trigger animations
useMotionValueEvent to trigger events when motion values change