Animation using Timeline: Road to RealTime part 1

6 min readJul 29, 2021

Road to RealTime is a Unity’s live series for learning animation, VFX, lighting and others using Timeline. The series is available here

Click here for more info about Timeline

Ball (sphere) animation

Before adding any animation into the Timeline, we need to create a new Playable director

Create a new empty game object. I’ll call it AnimMaster_Sequence.
Reset its position
Create a new Timeline asset with that game object
Create a new ball (sphere)
Add a color (material)
Place it in a start bouncing position

Drag and drop the ball into the Timeline. Choose Add Animation track

Here we need to define what a Keyframe is

Searching on Google, one of the definitions say: “A Keyframe in animation and filmmaking is what defines the starting point and the endpoint to any smooth transition. It holds the information where the transition should start and where it should end”.

Another definition found is: “A Keyframe is a timeline mark that records the position, scale, rotation, and opacity of an object at a specific frame of the scene”.

Using Unity, there are more options available.

So, for this blog, we can say that a Keyframe is a data container with information about a game object’s component such as position, rotation, scale, materials, isTrigger and others (but not for any component variable)

Let’s create 3 keyframes for the ball game object: the starting point, a bouncing point and an end point

Select the Playable director (AnimMaster_Sequence)
Press the record button in Ball (Animator) — red button

To create a new keyframe (while in recording mode) :

Move the ball into the desired position, or
Change a value in the game object (for instance, set the y position value to 9)

Or Right click on Position— Add Key
It will create a new key with the game object’s position data

You can also create a keyframe with the game object’s rotation info

Place the time line, for example, in the second 1
Record a new key. I will set it to x:34, y:0,5

For the third keyframe, I will put the time line in second 2 and x:30, y:15

Result

It works but it doesn’t look well. We’ll continue below.

Note:

If you want to configure several values, for instance, position, rotation and scale, you can place the time line in the desired position and later modify the game object as desired or set the values directly in the inspector
If you create, let’s say, a keyframe1 with position 0,0,0, and later you create a keyframe2 with position 1,1,1 and scale 3,3,3, the previous one (keyframe1) will show the game object with a scale of 3,3,3 (even if it is not recorded). So, it is a good idea to set up the values for position and scale in both keyframes

Result:

………………………………….

Continuing with the ball’s animation:

Press the curves button and extend the Timeline view

The lines show the 3 axis: z(blue), x(red) and y(green).

Click on the middle point in y and click on broken

Now we will be able to set up 2 periods of time: before the lower point and after it.

It will appear 2 tiny lines for editing both sections

Play with them changing it.

Result:

Awesome!

Right now it is working fine. Let’s click on the animation in Timeline, right click, Convert to clip track

Now we have some additional options:

Trim: go to the end of the clip, click and drag and drop till second one. Now the animation will be played only for 1 second

Undo the changes
Increase speed: now do the same as before, but with shift+click. You will know that the speed will be increased because the clip will show a dashed line. It will make the animation to be played in half time, quicker

Maybe you have noticed a blue line in the Timeline. It sets the duration.

By default, it is set to “Based on clips”, so it won’t last further than the longest clip. I’ll change it to Fixed length and move it to, let’s say second 4, to show something else

Select the Ball animation (“Recorded”).
Select Continue in Post-Extrapolate
Select on in Loop at bottom

Awesome !
Keep in mind:

When you create a new clip in Timeline from scratch, as you may have noticed, it is called Recorded, and if you create another one it will be called Recorded(1) and so on

The animation works fine in Timeline, but let’s suppose we want to give a better name to the clip and to the animation. Right now you can’t change the animation’s name in the inspector.

If you double click on Recorded (animation, cyan color) it will show this: