Smooth Fade UI Animation in Unreal Engine (Beginner Friendly Tutorial)

Learn to create fade-in and fade-out UI animations with Blueprints in Unreal Engine. Beginner friendly with input handling and reusable setup.

This is Rambod, and in this guide I’ll show you how to create a smooth fade-in and fade-out animation for your UI menus using Unreal Engine 5’s UMG system.
We’ll design a simple menu, build fade animations in Blueprint, and handle toggling with a single keyboard key.

This method is lightweight, easy to reuse, and works great for:

• Pause menus
• Dialog boxes
• Inventory screens
• Any UI element that needs smooth transitions

1) Create the Widget Blueprint

• Start with the Third Person Template.
• In the Content Drawer, right-click → User Interface → Widget Blueprint.
• Name it WBP_Menu.
• Open the new widget in the Designer view.

2) Build the Menu Layout

1. Drag a Canvas Panel into the designer and set it to Fill Screen.
2. Inside it, add a Size Box for the main menu container.
   • Anchor: Middle.
   • Alignment: 0.5, 0.5 (perfectly centered).
   • Size: 600x300 for a rectangular menu.
3. Add another Canvas Panel inside the Size Box to organize content.
4. Add an Image as a background:
   • Stretch it to full size.
   • Set Brush Color to a light gray with alpha 0.2 for transparency.
5. Add a Button and place a Text block inside.
   • Example text: Exit.
   • Style it black for contrast.

Now we have a basic menu layout.

3) Create Fade Animations

We’ll animate Render Opacity instead of Visibility for smooth transitions.

Fade In

1. In the Animations panel, create a new animation → name it FadeIn.
2. Add the Size Box to the track.
3. At 0s: set Render Opacity = 0, add keyframe.
4. At 1s: set Render Opacity = 1, add keyframe.
5. Save — now we have a clean fade-in.

Fade Out

1. Create another animation → name it FadeOut.
2. Add the Size Box again.
3. At 0s: Render Opacity = 1.
4. At 1s: Render Opacity = 0.
5. Save and compile.

Both animations are ready.

4) Play Fade In Automatically

• Switch to the Graph tab.
• From Event Construct, drag the FadeIn animation → connect it to Play Animation.
• Compile and save.
  This makes the menu fade in every time it’s created.

5) Input Handling & Toggle

Open BP_ThirdPersonCharacter (or whichever character you’re using).

1. Add a keyboard input — for this demo, we’ll use H.
2. On key press, create the menu widget:
   • Create Widget → Class = WBP_Menu.
   • Promote it to a variable → call it MenuWBP.
   • Add it to viewport.
3. Get Player Controller:
   • Set Input Mode Game and UI.
   • Show Mouse Cursor = true.

Toggle with Flip-Flop

• Add a Flip-Flop node on the H input.
• First press: Create Widget + FadeIn + Show Menu.
• Second press: Play FadeOut → Delay 1s → Remove From Parent.
• Reset Input Mode to Game Only.
• Hide Mouse Cursor again.

This ensures the menu behaves like a toggle.

6) Safe Validation

• Use Convert to Validated Get on MenuWBP.
• This prevents crashes if the widget doesn’t exist.
• Always check validity before playing animations or removing from parent.

7) Final Test

1. Run the project.
2. Press H → the menu fades in.
3. Press H again → fade out plays, widget is removed, and input returns to the game.

Clean and professional — you now have a reusable fade animation system for any UI.

Wrap Up

We built a fade-in / fade-out UI animation system in under 10 minutes using Blueprints:

• Designed a simple menu.
• Animated opacity for smooth transitions.
• Toggled with a key input.
• Correctly handled input modes and cursor visibility.

This system can be applied to any widget you build.

👉 Watch the full tutorial on YouTube
👉 Subscribe here: Rambod Dev Channel
👉 Read more: rambod.net