[New feature] List snapping for horizontal and vertical mobile lists

Hi everyone,

I’m Nick, the product manager on our Mobile team. We just shipped a feature update that should make your apps feel more native: list snapping for horizontal and vertical lists. It’s live now for all mobile apps.

What list snapping does

Until now, mobile lists were free-scrolling only — a swipe would coast and stop wherever the momentum ran out. That’s the right behavior for a feed of messages, but it’s wrong for some of the most common patterns in native apps: card carousels, featured content rows, onboarding flows, and full-screen vertical feeds. Those all need the list to settle in a predictable spot after each swipe.

With this update, you’ll find a new snap mode setting on your horizontal and vertical lists with three options:

  • None (the default): Free scrolling, exactly as lists behave today. Nothing changes for your existing apps.

  • Item: The list settles on the nearest item after each swipe. This is the one you want for card carousels and horizontally scrollable galleries.

  • Page: Each swipe advances one full screen of content. Think onboarding walkthroughs, full-bleed image galleries, or vertical video-style feeds where one item owns the whole viewport. When you choose page mode, we size the list item for you — its width (on a horizontal list) or height (on a vertical list) is set to fill the screen, so you never end up with a small card floating awkwardly in a full-page swipe.

The supporting settings

When you pick a snap mode, a couple of sub-options appear:

  • Snap alignment (item snapping only): Choose start to line items up with the leading edge of the list — the classic carousel look — or center to keep the active item centered, which works nicely for hero or featured content.

  • Deceleration rate: Fast stops crisply on the next snap point, which is what you usually want for carousels. Normal keeps the platform’s natural scroll momentum, so a flick coasts a while before settling — that longer glide tends to feel better for vertical page-style feeds.

Under the hood, there are actually several different native snapping implementations, and the right one depends on your item sizes, list padding, and item gaps. You don’t have to think about any of that — we read your layout settings and apply the correct native behavior automatically.

One thing to know about item snapping

Item snapping needs to know where every item sits before you scroll, so it only works with a fixed item size — a fixed width on horizontal list items or a fixed height on vertical list items. Items that fit to their content don’t have a known size until they render, so they can’t snap reliably. If your item is set to fit to content, the editor will hide the item option and explain how to bring it back. Page mode doesn’t have this requirement, since it sizes items to the screen for you.

Try it out

Open a horizontal or vertical list in your mobile app, head to the property editor, and set a snap mode — then preview it in BubbleGo to get a feel for the different combinations. The documentation covers all of the settings in more detail.

We think this closes one of the bigger gaps between Bubble-built mobile apps and the polish you expect from native ones. If you build something with it - a carousel, an onboarding flow, or a full vertical feed - share it in the thread below. And as always, let us know what you’d like to see next for mobile lists.

Happy building!

— Nick and the Mobile team

nice ooonee! @nick.carroll when can we expect animations native? It will make the apps look so much more beautiful. Also, I’m missing the glass effect for IOS?

Wow, Nick. Thanks for the update.

I believe this was an update we were all eagerly awaiting.

We will be enabling liquid glass on ios before September

What types of animations were you hoping to implement?

Nice!

bounce transitions, sweeping, and some of the ones present on desktop

This is great, thanks Nick and team!

Could you expose the current snap position as a readable state on the list? There is no way to read it in the editor.

The obvious use case is a progress indicator: page 3 of 12 on an onboarding flow, or a progress bar on a full-screen vertical feed.

Ideally a Current item index (and maybe Current item) state on the list, plus a Snap position changed event. Is that on the roadmap?

yeah good call, shouldn’t be too tricky to add. It would be nice to style the “current item” differently as well…

I believe this update is the reason of my problems with list :confused: