# Animating UMG Widgets

How to create animated UI elements in UMG.

Located along the bottom of the Widget Blueprint Editor are two windows which allow you to implement and control animations for your UI Widgets. The first, the Animations window, allows you to create essentially animation tracks which are used to drive the animation of your Widgets. The second, the Timeline window, is how an animation is applied to a Widget over time which is done by placing Keyframes at specified times then defining how the attached Widget should appear at that Keyframe (this could be size, shape, location, or even coloring options).

## Adding Animations

In order to get started with animations in UMG, you will need to first add an animation track. This can be done by clicking the +Animation button in the Animations window. Once you add an animation (yellow box below), you will be prompted to enter a name for the animation track.

After adding an animation track, the Timeline will become active and you can begin adding Animation Keys that are associated with values that shift over time for your Widgets. It should also be noted that you can have multiple animation tracks for each Widget, for example, having a button move across the screen and flash at the same time.

## Adding Animation Keys

There are two methods in which you can add Keys to an animation track. The first is by using the Auto Key checkbox located inside the Timeline window. This will automatically add Keys to the Timeline when you make adjustments to a value that supports Keyframing.

The currently selected animation track is highlighted at the top of the Timeline (indicated by the yellow box above).

The general workflow for adding Keys via the Auto Key option is to specify a time in which you want to reach your desired value for your Widget, then moving the Timeline Bar to that time and setting the value via the Details panel or by using the Grid (mostly used for location, rotation, or scale). Once you have set your end result, scrub to the beginning of your sequence and set the default state for your Widget. When scrubbing the Timeline bar between the two time periods, you should see your change occur gradually over the time period.

The second method in which you can add Keys is by clicking the Add Key button next to a setting that supports Keyframing.

In the image above, the icon next to each of the settings can be clicked on and doing so will result in a Key for the value being added to the Timeline at its current position. In the image below, Keyframes for Background Color have been added at 0.00 and 2.00 where the Background Color of a Button Widget is changed from White to Yellow over 2 seconds.

## Changing Key Values

You can change the value for multiple Keys at a particular time on the Timeline by holding Ctrl and clicking on the Keys.

Above, we have selected each of the Keys associated with the position of a Vertical Box containing Buttons so that we may set them manually via the Details panel. Manually entering values allows for more precise control (for example) over moving Widgets as we only want to move the object along one axis.

## Calling Animations

When you create an animation, a variable for it is also created. If you look on the Graph tab under the Animation dropdown menu in the MyBlueprint window, you will see all your animation tracks you have created. By holding Ctrl and dragging the animation into the graph, you will be able to issue commands to it such as Play or Stop.

Here we are telling our Start Animation to Play when the Widget Blueprint is constructed.

And here we are telling our Blinking Button animation to Stop playing when our Start_Button is clicked on.

## Example: Animated Main Menu

Get familiar with the following example of using animations in a simple Main Menu screen. In the first animation Buttons move from the bottom of the screen to its center. In the second animation Start Button blinks. Follow the steps below to get result similar to the example.

This example is for demonstrating how to set up animation in UMG only as the Buttons do not do anything when clicked on.

1. Set up your Main Menu layout. This layout has two Vertical Box. The first Vertical Box includes Text "GAME TITLE", the second Vertical Box includes two Buttons named START and QUIT. The following image shows this layout and its structure.

   Click image for full view.

2. Select the second Vertical Box that contains Buttons. Navigate to its properties in the Details panel and set Anchor as shown in the following image.

   Click image for full view.

3. Set properties for selected Vertical Box that contains Buttons under Slot (Canvas Panel Slot) section.

   - Position X: -300.0;
   - Position Y: 500.0;
   - Size X: 600.0;
   - Size Y: 200.0.

   Click image for full view.

4. Set Position Y to 1200.0 for selected Vertical Box that contains Buttons under Slot (Canvas Panel Slot) section.

   Click image for full view.

5. Click the +Animation button in the Animations window and name it StartAnimation.

6. Click the Add Key button next to the Position Y option in the Animations window and give the Animation a name such as StartAnimation.

7. Move the Timeline Bar to 1.00 on the Timeline.

8. Set Top to 500.0 and click the Add key to the current time.

9. Click the +Animation button in the Animations window and name it BlinkingButton. Move the Timeline Bar to 1.00 on the Timeline.

10. Select the Start Button in the layout of the widget. Navigate to the Details panel and click the Add Key button next to the Background Color under Appearance section.

    Click image for full view.

11. Move the Timeline Bar to 1.50 on the Timeline.

12. Set Background Color properties in the Animations window:

    Set R to 0.1; Set R to 1.0; *Set R to 0.1.

13. Move the Timeline Bar to 2.00 on the Timeline. Set Background Color properties in the Animations window:

    Set R to 1.0; Set R to 1.0; *Set R to 1.0.

14. Click the Graph tab to create a Blueprint script for this widget.

15. Create Blueprint Script as following image shows.

    In this script when Widget Blueprint is constructed, it plays the Start Animation (Buttons move from the bottom of the screen to its center). Then it uses the Set Timer node to call a Custom Event called StartBlinking every 2 seconds (the Set Timer node is set to Looping). StartBlinking Custom Event plays the Blinking Button animation every 2 seconds (which is color shift over time from white to green for Start Button).

16. Finally, create the Widget Blueprint from either the Level Blueprint or your playable Character Blueprint.

    In the MyCharacter Blueprint, we are creating the Widget containing the animations and UI layout of our Main Menu and adding it to the viewport by using the Add to Viewport node.

- ui
- animations
- blueprint
- umg ui designer

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page

- Adding Animations
- Adding Animation Keys
- Changing Key Values
- Calling Animations
- Example: Animated Main Menu

## Privacy Preference Center

### Your Privacy

When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer. More information

- ### Strictly Necessary Cookies

  Always Active
  Strictly Necessary Cookies

  These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.

  Cookies Details‎

- ### Performance Cookies

  Performance Cookies

  These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.

  Cookies Details‎

- ### Functional Cookies

  Functional Cookies

  These cookies enable the website to provide enhanced functionality and personalization. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.

  Cookies Details‎

Consent Leg.Interest
Select All Vendors
Select All Vendors
Select All Hosts

Select All

- REPLACE-WITH-DYANMIC-HOST-ID

  ### 33Across

  View Third Party Cookies
  - Name
    cookie name

- REPLACE-WITH-DYANMIC-VENDOR-ID

  ### 33Across

  3 Purposes

  View Privacy Notice

  ### 33Across

  3 Purposes

  View Privacy Notice
  REPLACE-WITH-DYANMIC-VENDOR-ID

  Consent Purposes

  Location Based Ads

  Consent Allowed

  Legitimate Interest Purposes

  Personalize

  Require Opt-Out

  Special Purposes

  Location Based Ads

  Features

  Location Based Ads

  Special Features

  Location Based Ads

Clear Filters

Information storage and access

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and personalize content.Privacy Policy