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.
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.
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.
Hovering over a section will show text explaining whether it is Additive, Relative, Additive from Base or no text, which means Absolute.
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.
- Create an animation and create a track for some property. For example Color and Opacity on an Image widget.
- Next, click the "+ Section" button.
- You will now have 2 separate Color and Opacity sections. These are applied together to create the final resulting color.
- 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.
- 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
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.
- Create a UserWidget Blueprint. Let's call it
- Add a Named Slot to it. This is an empty element that will allow us to place other widgets inside instances of this UserWidget
- Add any animations you wish to
WBP_FadeInContainer. Make sure the animations are affecting your Named Slot. For example an animation
FromTopcould fade in the Named Slot in from the top.
- Wrap the elements you wish to fade in with your new
WBP_FadeInContainer, and call the animation on your
WBP_FadeInContainerinstance to animate them.
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).
- Select the new widget you wish to apply the animation to in the Widget Hierarchy.
- 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.
Animating Multiple Widgets
- Select all the widgets you wish to animate with the same track in the Widget Hierarchy
- Right-click on an existing Track, choose Add Selected.
- 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
- Click on the green "+ Track" button.
- Drag the timeline scrubber to when you want the event to be fired.
- Click the (very small) + symbol to the right of the events flag, to create a new keyframe at this time.
- Right-click on the newly-created keyframe. It should look like a little dot.
From here you can choose
Properties > Event > Create New Endpoint
- 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.
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
- Create a
UUserWidgetC++ parent class, and mark some of the properties you want to animate with
- Create a Blueprint subclass of your C++ class.
- In the Animation panel, create an animation.
- Click "+ Track" and under "All Named Widgets" choose "[[This]]"
- In your newly-created track, create the smaller "+ Track" button. In the
dropdown window you should see all the properties you have marked with