Mobile view side panels with snap-side-scroll. Is it possible?

So I’ve got this app freshly built on bubble and I’m pretty new to app building let alone the platform. For full fairness, I’ve started learning about all thins only 3 weeks ago.

So the desktop version of my app is there just where I wanted to be but I am struggling to even visualise a possible workflow around what I’d like to achieve with my mobile-view.

In theory, I like to grab my 3 main columns (let’s call them no 1, 2 and 3) and empower them with a snap side-scrolling action: so only one panel is active at-a time if viewed form a mobile.

Then what I’d like it to do is to smoothly scroll to a new view-port showing the next panel that is right next to it. But I don’t want it to be stuck anywhere between the panels as a side-scroll but rather snap from panel to panel if the user have pulled enough to one side.

Let’s say if someone is loading up the page and logged in from mobile, they’ll get the “no 2” view in the middle. From there, I want them to be able to go left or right and back to the middle, but not around.

Obviously the header and footer have to accommodate that, but that’s another problem for another time.

So if any of you would wanted to build something like this, where would you start with the mindset?

Here’s the link for my app: https://itnk.app/

Thanks!

Two things I can bring to the table:

  1. List Swapper - This will allow you to flip your chats around that can make your chats seem more dynamic. Example here.
  2. App Drawer - This will allow you to create your own sidebars on your app without adding any floating groups, so you can globally utilize them and create dynamic content for a single drawer.

I can see you already have some swapping going on, but not sure how you have it setup (assuming it’s the hidden group method). You might like how easy it is with the swapper plugin though. For the Drawer, kind of self-explanatory. You can use it as a drawer system, or you can also utilize the “Drag Sheet” element it has as well.

1 Like

Hey buddy,

Thanks for the heads up, but these are not really what I’m after. It is not a chat application, in fact, the chat is the least important part of the app, and it’s working as it needs. You’ve got a good eye though, I’ve used a free plugin to do the job called ReverseRG.

On the other hand, your drawers look really neat but it’s not what I’m looking for. I just need to scroll to one of the sides and only on mobile view.

Just like on your phone home screen (on android) when you swap left or right.
Here I’ve made a short animation out of snapshots from my home screen for illustration purposes. This is the function I’m after on mobile view!

I basically want it to “snap” between view points when someone side-swipe on their phone.

slide demo

1 Like

I get it now. Let me know if you can’t figure it out. I can make a custom plugin for this.

OR… you can try to use my BetterSwipe - BuildAppolis | BuildAppolis (bappolis.com) plugin as well. This will require some work though to achieve your effect. The plugin itself is very versatile and you can add your own sensitivity triggers.

The forum post is here.

2 Likes

This looks good! I might take it at some point, but first, I need to figure out a way to make the page work in the way as intended. But I’ll keep this plugin in mind. Thanks buddy!