Bubble’s popups work fine on desktop, but on mobile they read as a web
overlay, not part of the app. There’s no equivalent of the panel you get
in Apple Maps or Google Maps — the one that slides up from the bottom,
sits at a few heights, and lets the map underneath stay visible and
tappable while it’s open.
So I built one. It’s not just open/closed like a popup — it drags by a
handle, snaps to whichever stops you define (30% / 60% / full screen by
default), and responds to velocity: a quick flick jumps a stop even if
you only moved it a little.
What makes it tricky (and why it took longer than expected):
- Handing off gestures cleanly between scrolling the sheet’s content and
dragging the sheet itself — the list scrolls when it can, the sheet
moves once the list is already at the top - Pointer capture, so a fast swipe doesn’t leave the sheet stuck if your
finger leaves the element mid-drag - The backdrop only intercepts clicks once the sheet is above its lowest
stop — at the bottom stop the page underneath stays fully usable,
same as the apps this is modelled on
You design the contents as a normal Bubble group — repeating groups,
inputs, workflows, whatever — and the plugin moves that group into the
sheet by its ID Attribute. No separate templating language.
Demo: https://bottomsheetswipe.bubbleapps.io/version-test
Marketplace: https://bubble.io/plugin/bottom-sheet—swipe-up-drawer-1788083812592x230084467771310100
Would be curious whether people would want a modal variant (one stop,
mandatory backdrop) as a separate mode, or whether that’s better as a
different element entirely.