Unreal Engine UI Animation

Animations are a relatively new addition to UMG, and are still being improved by Epic. That being said, it's still possible to make juicy animations in UMG, once you get used to a few of the quirks of the system.

This page is kind of a grab-bag of all the features in UMG animations, so let's dive in!

Thanks to @PartlyAtomic for helping to debug some of the weird behaviours with additive/relative animations.

The Basics

At the bottom of the screen, you should see a tab labelled Animations. Click it to open the Animations Window. If you are using Unreal 5.0 you may want to dock it by clicking "Dock in Layout" so that it stays open.

A widget can have many animations. An animation is made up of one or more tracks. A track is a timeline of changes that are applied to properties within the UserWidget's hierarchy.

Additive/Relative Animations

By default, new animation sections are added as Absolute animations. However it is possible to create additive or relative animations that work even when multiple animations are being played at the same time on the same widget.

To create an additive or relative animation, first add a default (absolute) track for the property you want to animate. Then click Track and choose Additive or Relative.

Alternatively you can right click on an animation section within a track, and in the pop-up choose Blend.

Adding an additive section

Hovering over a section will show text explaining whether it is Additive, Relative, Additive from Base or no text, which means Absolute.

Additive Animation

Blending and Easing Curves

It's hard to find, but the UI animation editor allows you to create multiple tracks for a single property and blend between them.

  1. Create an animation and create a track for some property. For example Color and Opacity on an Image widget.
  2. Next, click the "+ Section" button.
  3. You will now have 2 separate Color and Opacity sections. These are applied together to create the final resulting color.
  4. To change how the two are blended together, you can change the relative strength of a track by dragging on the very small white arrow in the top-left of a section.
  1. Now that you have a default animation curve, you can right-click on the arrow to change the easing function to any of the built-in easing curves

Re-using animations

It's not possible to create widget animation assets and re-use them across different Widget Blueprints, but it is possible to get something close to that by using the Named Slot widget.

  1. Create a UserWidget Blueprint. Let's call it WBP_FadeInContainer.
  2. Add a Named Slot to it. This is an empty element that will allow us to place other widgets inside instances of this UserWidget
  3. Add any animations you wish to WBP_FadeInContainer. Make sure the animations are affecting your Named Slot. For example an animation FromTop could fade in the Named Slot in from the top.
  4. Wrap the elements you wish to fade in with your new WBP_FadeInContainer, and call the animation on your WBP_FadeInContainer instance to animate them.

WBP_FadeInContainer Animations

WBP_FadeInContainer Instance

Other widgets can be placed in its Named Slot we have called ContentSlot.

Retargeting Animations

There are times where you might have an animation that you wish to apply to a different widget. This can be useful in a few situations:

  • Duplicating an animation but making it affect a different widget.
  • Fixing animations with broken links (shown in red).
  1. Select the new widget you wish to apply the animation to in the Widget Hierarchy.
  2. Right-click on an existing Track, and choose "Replace with (widget name)" where Widget name should be the name of the widget you have selected.
  3. Done!

Animating Multiple Widgets

  1. Select all the widgets you wish to animate with the same track in the Widget Hierarchy
  2. Right-click on an existing Track, choose Add Selected.
  3. The icon now should have yellow arrows on it to show that it affects multiple widgets. Who knew!

Animation Groups and Folders

UMG animations can be added to Groups and Folders.

  • Groups can be used to filter which tracks are shown in the Track Filter
  • Folders are useful for… grouping things. I don't know.

Creating and Triggering Events

  1. Click on the green "+ Track" button.
  2. Drag the timeline scrubber to when you want the event to be fired.
  3. Click the (very small) + symbol to the right of the events flag, to create a new keyframe at this time.
  4. Right-click on the newly-created keyframe. It should look like a little dot. From here you can choose Properties > Event > Create New Endpoint
  1. You should now be in the Graph view with your newly-created Sequencer Event!

Controlling Materials in UMG Animations

The ability to control material properties from an animation is absolutely indispensable for anyone using UMG. The interface for it is a little hidden but with it, you can set keyframes to control scalar and vector parameters to materials.

Controlling Materials in UMG

Animation showing the 5-step process to create an animation that controls a material parameter.

Exposing New Properties To Animation

If your UserWidget is the subclass of a C++ class, you may want to control some parameters

For this you can use the Interp property.

  1. Create a UUserWidget C++ parent class, and mark some of the properties you want to animate with UPROPERTY(Interp)

BUIUWCharacterPanel.h

#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "BUIUWCharacterPanel.h"

UCLASS()
class UBUIUWCharacterPanel : public UUserWidget
{
	GENERATED_BODY()
public:

	UPROPERTY(Interp)
	float SmileIntensity;
	
	UPROPERTY(Interp)
	bool bShowTeeth;
	
	UPROPERTY(Interp)
	FVector2D LookDirection;
	
	UPROPERTY(Interp)
	FVector HairWaveDirection;
};
  1. Create a Blueprint subclass of your C++ class.
  2. In the Animation panel, create an animation.
  3. Click "+ Track" and under "All Named Widgets" choose "[[This]]"
  1. In your newly-created track, create the smaller "+ Track" button. In the dropdown window you should see all the properties you have marked with Interp

Posted:

Updated: