A dynamic swiping interface for Bubble.io apps, designed to mimic Tinder-style interactions. It supports mouse and touch gestures for desktop and mobile, as well as button-triggered swipes. Ideal for dating apps, product discovery, or gamified decision-making, this plugin enables users to swipe cards left or right with fluid animations and custom events and workflows.
Key Features

1. Swipe Cards

Drag-and-swipe with natural animations.

Support for both mobile (touch) and desktop (mouse) input.

2. Button-triggered Swipes

Trigger swipes programmatically using "Like" or "Dislike" buttons.

3. Dynamic Data Binding

Map any “Thing” to card slots (Title, Description, Image).

Expose “card_id” state for use in workflows to store like or dislike.

4. Extensive Actions

Add a single card(added in the end of the queue).

Add List of cards(added in the end of the queue).

Swipe Left/Swipe Right/Next card.

Clear all data, Remove card from top, Remove card from top.

Set Data Source.

Lock/unlock swiping or lock left swipe or lock right swipe.

set slot text styles at runtime(Font Family, Font Size, Text Position, Slot 1 color, Slot 2 color, Text style).

Clear slot text style(Resets to default Style).

5. Exposed States and Workflows

Exposed State:

card_id: Updates dynamically on changing the card, can use in workflows to store like/dislike.

current_card_id: Updates dynamically on changing the card after swiping it gives _id of the next card, can use to show like/dislike count.

Workflows:

Swipe Left: Triggered when a card is swiped left.

Swipe Right:Triggered when a card is swiped right.

End: Triggered when the card queue gets empty.

FAQ's

Q1: How do I bind my data to the cards?
A: Use the Set Data Source action in a workflow—pass a list of Things, and map each field to your slots in the property editor.
Q2: How do I restyle text after initialization?
A: Use Set Slot Text Style to override font, size, and spacing on any slot at runtime; clear overrides with Clear Slot Text Style.
Q3: What happens when I run out of cards?
A: The On End event fires. You can catch it to load more cards (via Add List of Tinder Cards) or navigate elsewhere.
Q4: How do I reset the plugin to its initial state?
A: Call Clear All Data to empty the queue, then Add List of Tinder Cards or Set Data Source to reload the original card set.