Anytime we want to change the value of something over a given amount of time, we should use the Timeline nodes.


An example of a timeline node

Timelines are explained in detail in the official documentation here : https://docs.unrealengine.com/en-us/Engine/Blueprints/UserGuide/Timelines

That’s why, in this small tutorial, we will only focus on concrete examples answering to “what is it?”, “when to use it?”, and “how to use it?”.

The Timeline nodes

A Timeline node is a description of the evolution of one or more variables over the time. Internally, it’s just a set of keys (position in time), their associated values, and an interpolation strategy between the keys.

For example, if I say “at time t = 0, the elevation of my character is 50, and at time = 100, the elevation of my character is 200”, I’m basically describing a timeline (positions in time associated to values).


Elevation in function of the time

And in terms of blueprints, it should be translated to a Timeline node.

A typical use-case

This being said, a typical use-case of the Timeline nodes is the realization of animations. Animations are basically the visual representation of variables changing over the time, and so, the Timeline is a perfect tool to design an animation.

We will start with a small example: opening and closing a door when we click on it. At the begining the door is closed, when it is clicked, it starts rotating around its pivot along the Z-axis until it reaches the fully open position. When it’s clicked again, the rotation is made backward.


The door before and after the execution of the animation: a Timeline must be used to control the transition between the two steps

The variable changing over the time in this example is the angle of rotation of the door.

Using the Timeline node

Thinking a bit before using a Timeline node is always a good idea. Actually, we should always follow this plan:

  • Identify the attributes that will change over the time
  • Define the boundary values of these attributes (what is the value at the beginning, what is the value at the end)
  • Precise the evolution of the attributes between these bounds

For our example :

  • The attribute will be the angle of rotation of the door around the Z-axis
  • At the beginning, its value will be 0, and at the end it will be 90. The time between the two steps will be 2 seconds.
  • The evolution should start slowly, accelerate, and stop slowly.

To implement this, I follow the steps given thereafter.

Preliminary step: I start by creating a Blueprint Actor, I add a Static Mesh Component for the door, and in the Event Graph I add a On Actor Clicked event.

Step 1: I add a Timeline node following the On Actor Clicked event


Creating a Timeline node

Step 2: I double-click on the created node, and open the timeline editor


The Timeline editor

Step 3: The buttons in the top of the editor are used to add variables (whose value will change over time). I click on the first one (the f+) to add a Float variable, and I name it Rotation.


The Timeline of the Rotation

Step 4: I add two keys for my bounds by right-clicking on the graph.


The keys: the time/value can be edited accurately using the text fields. The “horizontal size” and “vertical size” buttons resize the view of the timeline so all keys/values will fit in the view.

Step 5: I adjust the keys by changing the key interpolation to User.

Step 6: I go back to the event graph and I set the rotation of the door on the Rotation variable of the timeline.

Everything should work now: we can place the newly created Blueprint Actor in a scene, and when we will click on it, the Play of the Timeline will be called, and the rotation of the mesh will be updated every frame for the duration of the Timeline.

A slightly more advanced example

Now, we want to close the door when we click again on it. To do this, we will just call the Reverse of the Timeline on the second click.

To manage properly the distinction between the first click and the second one, we will use the FlipFlop macro. Here is what is becoming the blueprint:

An important thing to note is that the Timeline is always keeping a value of its internal time (the time since the call to play). When we call Reverse, it plays backward, but from the current time.

This helps to understand the other inputs:

  • Play starts playing from the current time (initially 0)
  • Play from Start resets the time to 0 and plays
  • Stop blocks the Timeline
  • Reverse starts playing backward from the current time
  • Reverse from End starts playing backward from the last key of the Timeline
  • Set New Time sets the time to the value given as parameter for New Time

Finally, this is what we should observe:


The door opens on the first event and close on the second one