The Gesture Detector element allows you to capture mobile-style touch interactions (swipes and long presses) and use them to trigger workflows in your Bubble application.
1. Setup
Place the "Gesture Detector" element anywhere on your page.
It is a utility element and will remain invisible to your users in run-mode.
By default, it listens for gestures performed anywhere on the entire page.
2. Triggering Workflows
This plugin provides five specific events that you can use as workflow triggers. To use them:
Go to the Workflow tab in Bubble.
Click "Click here to add an event...".
Navigate to Elements > A Gesture Detector... and select your desired gesture:
Page is Swiped Left: Triggered when a horizontal leftward swipe is detected.
Page is Swiped Right: Triggered when a horizontal rightward swipe is detected.
Page is Swiped Up: Triggered when a vertical upward swipe is detected.
Page is Swiped Down: Triggered when a vertical downward swipe is detected.
Longpress on page: Triggered when a user holds their finger down in one spot for more than 500ms.
3. Common Use Cases
Mobile Navigation: Use "Swiped Left" and "Swiped Right" to navigate between different views or tabs (e.g., Go to page... or Set state...).
Image Galleries: Swipe left or right to move to the next/previous image in a repeating group.
Context Menus: Use "Longpress on page" to reveal a hidden edit menu or extra options for a specific item.
Pull-to-Refresh: Use "Swiped Down" at the top of a page to refresh data or trigger an API call.
Pro Tips for Better Detection:
Intentional Movement: The plugin requires a minimum movement of 30-50 pixels to classify an action as a "swipe." This prevents accidental triggers during simple taps.
Conflict Resolution: If you have other scrollable elements (like a long Repeating Group), horizontal swipes will generally work better than vertical swipes, as vertical swipes may compete with the browser's native page scrolling.
Testing: Always test these gestures on a physical mobile device or using the Chrome DevTools mobile emulator, as standard mouse clicks do not simulate "touch" events.
Demo Editor Page:
https://bubble.io/page?id=hks-demos&test_plugin=1776429589927x458675181263519740_current&tab=Workflow&name=gesture_detection&type=page&wf_item=cmNBNDemo Page:
https://hks-demos.bubbleapps.io/version-test/gesture_detection?debug_mode=true
Built on Bubble
