Fluid Swipe-to-Action
A list item that can be dragged horizontally with high elasticity. Dropping it reveals under-the-fold action buttons (like Delete/Archive) with an elastic rubber-band snap.
Live Demo
Design Sync
10:30 AMSwipe me left to reveal the delete action permanently.
What It Is
A list item that can be dragged horizontally with high elasticity. Dropping it reveals under-the-fold action buttons (like Delete/Archive) with an elastic rubber-band snap.
✓When to Use
- Mobile-first list views (Emails, Tasks)
- Heavy editing interfaces
✕When NOT to Use
- Desktop grids where a mouse hover menu is vastly superior and standard
Configuration Tips
- 01Map Framer Motion `drag="x"` coordinates to an elastic spring, scaling the revealed icons based on drag distance.
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Build a mobile-style list item that can be dragged left using framer-motion drag constraints, revealing a colored Delete background underneath.
Code Example (Tailwind CSS)
export function LiquidSwipeActionDemo() {}Related Effects
Pull-to-Refresh
A gesture-driven reveal of a loading indicator when a user scrolls past the top edge of a content area, triggering a data refresh.
Drag & Drop Ghost
When dragging an item, the original item remains lowered in opacity as a "placeholder", while a slightly scaled-up, shadowed "ghost" follows the cursor.