Swipeable Cards Stack — Free HTML CSS JS Tinder-Style Swipe Snippet

The Tinder-style swipe stack is a widely recognized interaction: a pile of cards where the top one can be dragged left or right, rotates slightly as it's dragged, and either flies off-screen if dragged far enough or springs back to center if released short of the threshold. This snippet implements the whole interaction using the modern Pointer Events API, which unifies mouse, touch, and stylus input into a single set of events.

How only the top card is draggable

Every .swipe-card gets a drag listener attached via attachDrag, but each listener's pointerdown handler immediately checks if (card !== getTopCard()) return. getTopCard() returns the *last* element in the .swipe-card NodeList, since later siblings render on top in normal DOM stacking order. This guard means clicking or touching a card buried underneath the top one does nothing — only the visually topmost card responds to drag gestures.

How the drag and rotation work

pointermove computes currentX/currentY as the offset from the initial pointerdown position, then sets transform: translate(...) rotate(...) directly via inline style. The rotation angle is simply currentX / 12 — a card dragged 120px to the right rotates 10 degrees, giving the drag a natural, physical feel where horizontal movement and tilt are proportionally linked, mimicking how a physical card would pivot as you slide it across a table.

How pointer capture keeps the drag reliable

card.setPointerCapture(e.pointerId) is called on pointerdown. This ensures all subsequent pointer events for that same pointer continue to fire on the card element even if the cursor moves faster than the browser can track and briefly ends up outside the card's bounds — without it, fast drags could "lose" the card and stop responding to movement.

How the fly-off and reset decision is made

On pointerup, currentX is compared against a SWIPE_THRESHOLD constant (100px). Past the threshold in either direction, finishSwipe adds a .fly-left or .fly-right class, which uses !important transform values and a CSS transition to animate the card off-screen and fade it out; a transitionend listener (with { once: true }) then removes the card from the DOM once the animation actually finishes, so the next card underneath becomes the new top card automatically. If the drag didn't clear the threshold, the inline transform is simply cleared, and the card's own CSS transition (present whenever .dragging isn't active) animates it smoothly back to center.

How the accept/reject buttons reuse the same logic

The two action buttons call programmaticSwipe(direction), which finds the current top card via the same getTopCard() helper and calls the identical finishSwipe function used by a real drag gesture — buttons and touch/mouse dragging are just two different triggers for the same underlying swipe logic.