Tinder-style Swipeable Card Stack

This is a Tinder-style Swipeable Card Stack. It replicates the iconic “swipe-left, swipe-right” user interface for decision-making. Its function is to provide a mobile-first, gesture-driven method for navigating through a collection of items (in this case, recipe cards), where each card is physically dragged and dismissed to reveal the next one in the stack.

Specs

• Weight: ~25 KB (Hammer.js dependency).
• Performance: High. Gesture events are handled efficiently by Hammer.js, and card animations use CSS transform, ensuring GPU acceleration.
• Theming / Customization: The card content and styling are standard HTML and CSS, making them easy to adapt for any use case (profiles, products, articles, etc.).
• Responsiveness: Mobile-first design. The layout is built with viewport units and scales fluidly.
• Web APIs: Pointer Events API, Touch Events API.
• Graceful Degradation: The component includes fallback button controls. If gesture detection fails, users can still navigate the stack with standard clicks.

Anatomy

The component uses a “re-stack and re-bind” logic to create an infinite loop.

• HTML (The Skeleton): A .tinder--cards container holds multiple .tinder--card divs. A separate .tinder--buttons group provides the fallback click controls.
• CSS (The Skin): Uses absolute positioning and z-index to create the stacked card effect. A transform: scale() is applied to cards further down the stack to give a sense of depth.
• JS (The Nervous System): Hammer.js is initialized on each card to listen for pan and panend events. When a card is swiped far enough to be “removed,” an addNewCard function clones the dismissed card’s HTML, appends it to the end of the stack, and re-initializes all event listeners.

Logic

The core of the interaction is the Gesture-to-Transform Mapping.

hammertime.on("pan", function (event) {
    if (event.deltaX === 0) return;
    
    // Angle the card based on mouse velocity and position
    var xMulti = event.deltaX * 0.03;
    var yMulti = event.deltaY / 80;
    var rotate = xMulti * yMulti;

    // Apply the movement and rotation
    event.target.style.transform =
        "translate(" +
        event.deltaX +
        "px, " +
        event.deltaY +
        "px) rotate(" +
        rotate +
        "deg)";
});

Instead of a simple horizontal drag, the script calculates a rotational value by multiplying the horizontal movement with the vertical movement. This creates a more natural, “flicking” motion, where dragging a card diagonally causes it to tilt realistically as it moves off-screen. This small detail significantly enhances the tactile feel of the interaction.

Feel

Playful and intuitive. The interface perfectly mirrors the learned behavior of popular mobile apps, making it immediately understandable. The physics of dragging and releasing the cards feels natural and responsive. The infinite loop, where dismissed cards reappear at the bottom of the stack, creates an endless, addictive browsing experience.