Bubble.io Design: Sliding Side Panel (Beginner) скачать в хорошем качестве

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