Hi guys,
does anyone have any idea how to implement such a “pull-up element” (no idea what the correct term is) in Bubble for the mobile view? So basically a group that you can drag up and down with your finger on the smartphone display (like in Google Maps):
Is there a plugin for this or something? Has anyone ever done something like this?
Best,
Robert
There might be a plug-in that implements mobile gestures. You’d have to search the marketplace. If, however, a simple tap would do, that should be possible with pure Bubble.
Hi @sudsy I’ve already looked up the marketplace, but couldn’t find anything about it. Anyways thanks for your help!
Well, I found the following when searching for “gesture”. I have no experience with it. Just passing it along…
You can use that and some css, it won’t be exactly right but you can get it close
You’ll need a html element with the css to hide the group with a transition time on it so it’s smooth, in a condition linked to a state you also have css to position the group where you would like it after the swipe
The plugins should allow you to run a workflow which would toggle that state.
Is there a reason Bubble’s built-in animations couldn’t be used? Seems it would be simpler.
Yeah but they don’t look that good. The slide ins only slide half way then fade out.
I don’t have the code on me now but a css animation will look and feel so much better. Once you try it you’ll know, you’ll never go back to the bubble animations.
It’s only 3 lines of code
Yeah, fair point. It’d be nice if margins were available for Bubble’s built-in transitions (not animations, but transitions).
That’s would make too much sense
Nice, thank you. I didn’t search for “gesture” that why I haven’t found it. I’ll have a look!
I use a plugin called Swipe Detector. It doesn’t have the “grab and move” feel, but it’s a solid plugin for using swipe gestures on elements for interactions.
It detects swipe actions by element ID, which makes it really easy to implement on the responsive engine (probably my favorite part about it).
I think that the term used is bottom sheet (or bottom modal) or at least was the one I looked for when I tried to implement this.
There are several ways to accomplish it, but I think that the most straightforward is to create a first group that acts as a container with align to parent layout and allowing vertical overflow, and inside this group you place another group (the bottom sheet) positioned at the bottom with a bottom margin of -5px.
This is the result I got in my app:
Obviously it’s not like a native element but it works well. If you want to hide the bottom sheet with a gesture you can either use a plugin or trigger a workflow action upon scrolling the first group a certain amount of pixels (this will need some JS coding and the use of JStoBubble).
Hope it helps!
