Bubble.io Mini Course - [PART 4] Stripe Style Login
🎨 Want cleaner UI and better design in Bubble?
Bubble Design Lab gives you access to real projects, design walkthroughs, and direct feedback from Nick. Join now for just $39/month:
👉 https://www.skool.com/bubble-io/about
Build a Stripe-Style Login Page in Bubble – Part 4
In this final video of the series, we design and animate a beautiful "Forgot your password?" experience. You'll learn how to use custom states and conditional visibility to transition smoothly between login and password reset views. We also clean up visual flow and spacing to give the entire form a polished, professional finish.
🎯 You’ll learn how to:
Set up a toggleable “Forgot password” view using custom states
Animate group height changes for smooth transitions
Apply conditional logic for clean, responsive UI
Build and style a password reset form
Hide or show elements based on group height
Finalize layout tweaks for pixel-perfect polish
Key moments:
00:00 – Intro and preview of completed login form
00:28 – Creating the “Forgot password” custom state
01:34 – Setting visibility condition for login elements
03:13 – Creating workflows to toggle forgot state (yes/no)
05:29 – Animating height transition between login + forgot states
06:40 – Building and styling the "Reset password" section
08:56 – Deleting unneeded elements (Sign in, SSO buttons)
09:45 – Adding supporting instructional text
10:57 – Styling "Reset password" and "Go back" buttons
11:18 – Creating visibility logic based on group height
13:02 – Applying conditional logic to all sign-in elements
16:16 – Previewing the animation: smooth transitions between states
17:31 – Final tweaks to layout height and white space
19:07 – Outro: Wrap-up + invite to Bubble Design Lab