UE5 Fade UI Animation

What You Will Learn

• How to create a simple title widget in UMG
• How to create fade in and fade out widget animations
• How Render Opacity controls UI transparency
• How to trigger widget animations automatically when a level starts
• How to use Level Blueprint for quick UI startup logic
• How to use Delay nodes to control animation timing
• How to remove the widget after the fade out finishes
• How to reuse the same logic for splash screens, title cards, and transitions

What We Are Building

The goal is simple. When the level starts, Unreal Engine will create a widget, add it to the screen, play a fade in animation, wait for a short moment, play a fade out animation, then remove the widget from the viewport.

The final flow looks like this:

Level Starts
Create Title Widget
Add Widget to Viewport
Play Fade In Animation
Wait
Play Fade Out Animation
Wait
Remove Widget from Parent

This is a small system, but it immediately improves presentation. A hard cut feels cheap. A smooth fade feels intentional.

When to Use This Fade Trick

This setup is useful whenever you need a UI element to appear temporarily without player input.

Good use cases include:

• game title screens
• level intro cards
• chapter titles
• mission start text
• splash screens
• tutorial popups
• round start messages
• cinematic UI overlays
• area name reveals
• loading transition overlays

Step 1: Create the Widget Blueprint

Start by creating a new Widget Blueprint.

In the Content Drawer:

Right-click → User Interface → Widget Blueprint

Name it:

WBP_Title

This widget will be responsible for showing the title or splash text on screen.

Step 2: Add the UI Elements

Open WBP_Title.

Use a Canvas Panel as the root, then add a Text Block.

Rename the Text Block to something clear:

TitleText

Set the text to whatever you want to display, for example:

Title

You can center it on the screen, increase the font size, and adjust the color based on your project style.

Step 3: Understand Render Opacity

Render Opacity controls how visible a widget is.

The value works like this:

Render Opacity = 0 → fully invisible
Render Opacity = 0.5 → half transparent
Render Opacity = 1 → fully visible

For a fade animation, we simply animate Render Opacity over time.

Fade in means opacity goes from zero to one. Fade out means opacity goes from one to zero.

Step 4: Create the Fade In Animation

In the Widget Blueprint, find the Animations panel.

Create a new animation and name it:

FadeIn

Select the widget element you want to fade. This can be the Text Block itself or a parent container if you want multiple elements to fade together.

Add a track for Render Opacity.

Create these keyframes:

Time 0.0 seconds → Render Opacity = 0
Time 1.0 seconds → Render Opacity = 1

This creates a one-second fade in animation.

Step 5: Create the Fade Out Animation

Now create a second animation and name it:

FadeOut

Add the same Render Opacity track.

Create these keyframes:

Time 0.0 seconds → Render Opacity = 1
Time 1.0 seconds → Render Opacity = 0

This creates a one-second fade out animation.

At this point, your widget has both animations ready.

Why Use Two Animations?

You could technically use one animation and play it forward or backward, but two separate animations are easier for beginners to understand and debug.

Separate animations also make the setup clearer:

• FadeIn handles appearing.
• FadeOut handles disappearing.

For a small title card or splash screen, this is clean enough and easy to maintain.

Step 6: Open the Level Blueprint

Now we need to trigger the widget when the level starts.

Open the map where you want the fade effect to happen, then open the Level Blueprint.

You can use this setup for quick level-specific intro UI. If you later need a more global version, you can move the same logic into a Player Controller, Game Mode, or UI Manager.

Step 7: Create the Widget on Begin Play

In the Level Blueprint, start with:

Event Begin Play

From Event Begin Play, add:

Create Widget

Set the widget class to:

WBP_Title

This creates the widget instance when the level starts.

Step 8: Promote the Widget to a Variable

From the Create Widget return value, promote it to a variable.

Name the variable:

TitleWidget

This is important because you need a reference to the widget later when you play animations and remove it from the screen.

Without storing the widget in a variable, the Blueprint can become harder to manage once the logic grows.

Step 9: Add the Widget to the Viewport

From the widget reference, call:

Add to Viewport

This displays the widget on the player’s screen.

At this point, the widget exists and is visible, but we still need to play the animation sequence.

Step 10: Add a Short Delay Before Animation

After Add to Viewport, add a small Delay.

Example:

Delay = 0.2 seconds

This gives Unreal a small moment to fully initialize and display the widget before playing the animation.

In many cases, animation works without this delay, but adding a tiny delay can make the sequence more reliable, especially for beginner setups.

Step 11: Play the Fade In Animation

From the TitleWidget reference, call:

Play Animation

Select:

FadeIn

This starts the fade in animation and gradually reveals the title.

Step 12: Wait Before Fading Out

After playing FadeIn, add another Delay.

Example:

Delay = 1.0 seconds

This lets the fade in complete and keeps the title visible briefly before the fade out begins.

You can increase this value if you want the title to stay on screen longer.

Step 13: Play the Fade Out Animation

After the delay, call Play Animation again.

This time, select:

FadeOut

The widget will gradually become invisible.

Step 14: Remove the Widget After Fade Out

After FadeOut starts, add another Delay.

Example:

Delay = 1.0 seconds

This gives the fade out animation enough time to finish.

Then call:

Remove from Parent

This removes the widget from the viewport.

Do not skip this step. If the widget stays in the viewport while invisible, it may still exist and consume unnecessary UI resources.

Final Blueprint Flow

The full Level Blueprint logic should follow this order:

Event Begin Play
Create Widget WBP_Title
Set TitleWidget Variable
Add to Viewport
Delay 0.2
Play Animation FadeIn
Delay 1.0
Play Animation FadeOut
Delay 1.0
Remove from Parent

This creates a clean automatic fade sequence when the level starts.

Why Delays Are Used Here

Delays control timing. They make sure each step has enough time to complete before the next step begins.

In this setup:

• The first delay gives the widget time to initialize.
• The second delay lets FadeIn finish and keeps the title visible.
• The third delay lets FadeOut finish before removing the widget.

For beginner UI animation, this method is simple and easy to understand.

Better Timing for Real Projects

Using delays is fine for small tutorials and simple UI effects. For larger systems, you may want to use animation finished events instead.

A more advanced version could use:

• Bind to Animation Finished
• custom events
• a UI manager
• Player Controller based UI flow
• Game Instance controlled transitions

But for a title card on level start, the delay method works well and is easy to maintain.

Level Blueprint vs Player Controller

In this tutorial, the logic is placed in the Level Blueprint because it is fast and easy to demonstrate.

Use Level Blueprint when the fade effect belongs only to one level.

Use Player Controller or a dedicated UI manager when the same fade effect should be reused across many levels.

Simple rule:

• One level only: Level Blueprint is fine.
• Multiple levels or full game transition system: use Player Controller, Game Instance, or a UI manager.

How to Reuse This for Level Names

You can reuse the same setup for area names or level introductions.

For example:

Forest Entrance
Enemy Base
Chapter Two
Mission Started
Wave One

Instead of hardcoding the text inside the widget, create a Text variable and expose it on spawn. Then set the title text when creating the widget.

How to Reuse This for Splash Screens

For splash screens, you can replace the Text Block with an Image widget.

Example:

Canvas Panel
  Image_Logo

Animate the Render Opacity of the logo image instead of text.

This gives you a simple logo fade in and fade out at the start of a game or level.

How to Fade Multiple Elements Together

If you want multiple elements to fade together, put them inside a parent container.

Example:

Canvas Panel
  Overlay
    Image_Background
    Text_Title
    Text_Subtitle

Animate the Render Opacity of the parent Overlay instead of animating each child separately.

This keeps the animation simple and prevents mismatched timing.

Common Mistake: Forgetting Add to Viewport

If nothing appears when you press Play, check whether you called Add to Viewport.

Create Widget only creates the widget instance. It does not automatically display it.

Common Mistake: No Widget Reference

If you cannot play the animation later, make sure you promoted the widget to a variable.

You need a valid reference to the actual widget instance that was added to the viewport.

Common Mistake: Removing the Widget Too Early

If the widget disappears before the fade out is visible, your final delay is too short.

The delay after FadeOut should match or exceed the length of the FadeOut animation.

Common Mistake: Animating the Wrong Widget

If only one part of your UI fades and the rest stays visible, you probably animated the wrong element.

If the whole card should fade, animate the parent container. If only the title text should fade, animate the Text Block.

Common Mistake: Starting at the Wrong Opacity

For FadeIn, the first keyframe should usually be opacity zero.

For FadeOut, the first keyframe should usually be opacity one.

If the animation looks reversed, check your keyframes.

Design Tips for Better Fade UI

• Keep fade animations short and clean.
• Use one parent container if multiple elements should fade together.
• Use readable font sizes for title cards.
• Do not leave invisible widgets on screen forever.
• Use animation finished events for more advanced systems.
• Use consistent timing across your game for a professional feel.
• Do not overuse fade effects on every UI element.

Practical Use Case: Chapter Intro

A chapter intro can use the same structure:

Create Widget
Set Chapter Name
Add to Viewport
Fade In
Hold
Fade Out
Remove from Parent

This creates a clean start-of-level presentation without needing a cinematic sequence.

Practical Use Case: Mission Start Text

For mission-based games, you can display a short objective message:

Mission Started
Reach the extraction point

The title fades in, stays briefly, then fades out while gameplay continues.

Practical Use Case: Area Name Reveal

Many games show area names when the player enters a new location.

You can trigger the same fade widget from a trigger volume instead of Event Begin Play.

The logic is almost identical. The only difference is that the trigger event starts the widget sequence instead of the level start.

How to Improve This System Later

Once you understand the basic version, you can expand it into a reusable UI transition system.

Possible improvements:

• Expose the title text on spawn
• Expose fade duration as a variable
• Expose hold duration as a variable
• Support images and logos
• Use animation finished events instead of fixed delays
• Create a reusable UI manager function
• Add sound effects when the title appears
• Add background blur or dark overlay

Conclusion

In this tutorial, you learned how to create an automatic fade in and fade out UI animation in Unreal Engine using UMG and Blueprints. You prepared a title widget, created FadeIn and FadeOut animations, added the widget to the viewport from the Level Blueprint, controlled timing with delays, and removed the widget after the animation finished.

This is a small technique, but it makes your game feel more polished immediately. Use it for splash screens, title cards, level intros, mission text, chapter names, and simple UI transitions.

Watch the full video tutorial: Make Your Game Look Awesome With This Simple Fade Trick

Related tutorial: Smooth Fade UI Animation Tutorial

Subscribe for more Unreal Engine tutorials: Subscribe to Rambod on YouTube

Resources

• YouTube Tutorial
• Smooth Fade UI Animation Tutorial
• More Unreal Engine Tutorials
• Rambod Dev YouTube Channel

Frequently Asked Questions

Can I make UI fade in and out without C++?

Yes. You can create fade animations in UMG and trigger them using Blueprint nodes such as Create Widget, Add to Viewport, Play Animation, Delay, and Remove from Parent.

What property should I animate for a fade effect?

Use Render Opacity. A value of zero is invisible, and a value of one is fully visible.

Why should I remove the widget after fading out?

Removing the widget keeps the viewport clean and prevents invisible UI from staying active unnecessarily.

Can I use this for splash screens?

Yes. Replace the Text Block with an Image widget or logo, then animate its Render Opacity.

Should this logic be in Level Blueprint?

Level Blueprint is fine for a level-specific intro. For reusable UI transitions across many levels, use Player Controller, Game Instance, or a dedicated UI manager.

Can I trigger the same fade later during gameplay?

Yes. You can trigger the same widget animation from other Blueprints, trigger volumes, interaction events, mission systems, or UI managers.