How to Animate a Swipe-to-Dismiss Card
Build smooth swipe-to-dismiss card interactions: horizontal translation tracking, opacity fading, background action reveals, and collapse collapse animation.
Core Takeaway
A swipe-to-dismiss gesture tracks finger movement along the X-axis, gradually fading the card's opacity and revealing underlying actions (archive, delete). If released past 40% width or with significant velocity, the card flings off-screen and the surrounding list items collapse smoothly to fill the gap using a 200ms height animation.
Tracking and angle detection
Users rarely swipe strictly horizontally. Detect touch direction early: if vertical movement exceeds horizontal movement in the first 10px, yield to page scroll; otherwise, lock into horizontal card dragging.
Visual cues during swipe
As the card translates horizontally, fade its opacity from 1.0 down to 0.4 and scale underlying action icons (trash bin, checkmark) up from 0.8 to 1.1 as the trigger threshold is approached.
- Translate card via transform: translateX(deltaX)
- Scale and reveal action icons as threshold approaches
- Fade card opacity proportionally to drag percentage
- Animate container height and margin to 0 when dismissed
The list collapse phase
Flinging the card away is only half the animation. Once the card exits the viewport, the empty space must collapse cleanly so remaining items glide upward into place without jarring layout jumps.
Undo availability
Swipe gestures are prone to accidental triggering. Always display a transient toast notification with an 'Undo' action allowing the user to restore the dismissed item.
Key Principles to Remember
- Calculate touch angle in the first 10px to prevent scroll hijacking
- Fling card off-screen on threshold pass, collapse gap with height transition
- Always pair destructive swipe gestures with an immediate Undo toast
- Provide accessible keyboard buttons for deleting or archiving
Frequently Asked Questions
Sources
- Lists: Swipe Actions — Apple Human Interface Guidelines
- Gestures: Dragging and Swiping — Material Design 3