Bubble.io Design: Sliding Side Panel (Beginner)
👉 Want more smart design hacks like this?
Join the Bubble Design Lab on Skool for $39/month to access full editor links, video tutorials, and 1:1 feedback from Nick:
https://www.skool.com/bubble-io/about
Tired of clunky popups blocking your app’s interface? This tutorial shows you how to build a floating group side panel — a slick, animated UI that slides in to display rich data without disrupting the rest of your app.
In just 20 minutes, you'll learn to build a reusable side panel that dynamically loads content, overlays the background with a soft grey tint, and animates cleanly in and out. This approach is perfect for transaction details, user previews, item views and more — and gives your Bubble app a modern, polished feel.
You’ll also get UX tips, animation logic, and advice on using custom states and conditional visibility to structure these interactions in a reusable way.
00:00 – Problem: Popups suck (and what to use instead)
Why traditional popups interrupt flow and how a floating side panel improves UX
00:38 – Preview: The final result and where we’re heading
01:11 – Step 1: Add your floating group panel
Create a full-page floating group and set a custom state for dynamic data
02:30 – Step 2: Create the blurred grey overlay
Set a semi-transparent background to keep the user focused
03:20 – Step 3: Drop in the content container group
Create the inner group to hold dynamic content (e.g., transaction details)
04:43 – Step 4: Style the side panel
Set width, background color, roundness, and layout spacing
06:15 – Step 5: Add the header + close icon
Use a grouped title and icon with a bottom border to frame the content
08:05 – Step 6: Animate the close button
Slide the side panel out, pause briefly, reset the state, and hide the group
11:10 – Step 7: Add content blocks dynamically
Display key fields like amount, customer name, date, merchant and more
14:00 – Step 8: Style the content rows (labels + values)
Create simple group rows with clear visual hierarchy and spacing
17:11 – Step 9: Add a notes section
Use a multi-line input for transaction notes with padding and styling
20:28 – Step 10: Trigger the side panel from a repeating group row
Set up the workflow to show the panel when a row is clicked
22:14 – Step 11: Animate the panel in (slide right)
Apply smooth transition animations to elevate UX
22:52 – Final Tweaks: Visibility settings, formatting and preview
Fix page load visibility, format currency, test animation flow
23:37 – Final Thoughts: Why this approach is clean, modern, and reusable
Reviewing the interaction and why it works well for displaying inline data