All content in this course uses:

Lesson 4.1 - Creating a Timeline and Adding Keyframed Animation Tracks

Timeline is a powerful tool that allows creators to make sequenced animations in Unity. In this lesson, you will learn to create a master Timeline, configure your windows for animation, animate objects within Unity, and organize your animation tracks. 

Lesson Overview

To start, we need to create a Master Timeline that will contain and control all of our animations in this Scene. The Timeline can be thought of as a sequence of various Animation Clips and triggers in your Scene, all of which can be edited together to orchestrate a story. 

. Unzip the folder and move it to an organized location on your computer, add the Project in the Unity Hub and open it.  

 Once the project is open, create an empty GameObject and name it 

Dock it to the bottom of the screen. If you need a reminder about docking windows in Unity's interface, please refer to Unit 2 of the course.   

The Timeline window will appear in your Scene (

 button inside the Timeline and when prompted, save your new Timeline as 

Now lock your Timeline so that when you click on other GameObjects, the Timeline doesn’t vanish. 

 Lock the Timeline by clicking on the lock symbol in the upper-right corner of the Timeline window. 

Creating a Master Timeline

At this point, you should configure your window to make it easier to work with Timeline. We will make the editing window look more like a traditional non-linear editor (NLE), such as Adobe Premiere or After Effects (

The Timeline should be docked at the bottom of the screen already. From there, our goal is to have the Scene view and Game view windows exist side by side and not in a docked tab format. 

Prior to this unit, we’ve only been working in the Scene view. The Game view is what the main Unity Camera sees. In a game, the Game view usually follows the character. In an animation or a film, camera movements help tell the story. For our purposes, the Game view camera in this project is set to a wide establishing shot focused on the corner and the alley. We’ll dive deep into cameras in Unit 5. 

Let's create a new interface Layout more conducive to editing the Timeline:

 Dock the Project window underneath the Hierarchy window. We'll need to drag Assets into our Scene and then modify their properties in the Inspector, so it's best to have access to all three of these windows. Feel free to switch the Project window to 

 by clicking the context button in the upper-right corner of the window (

 Undock the Game view from the Scene view by left-clicking and dragging it to the right, then release the window when it’s next to the Scene view. 

 In the Game view, adjust the Display drop-down to 

. This will crop the contents of the window to a 16:9 (widescreen) viewport, allowing us to see everything that the camera sees (

, or another name of your choosing so it can be loaded later. 

Configuring Your Windows 

There are surprisingly few cars in this city. Let's fix that by creating a short animation in which a taxi drives through an intersection. For this first part, let's say we want the animation to be 15 seconds. Unity, by default, will try to render a Scene at 60 frames per second, meaning the animation's total duration will be 900 frames.  

 Slowly drag and drop the GameObject into the left portion of the Timeline window, then select 

Animation Tracks allow us to record an animation for the object assigned to it.

 You will now see a new Animation Track under the Master Timeline with the Car1 Animator assigned to it. In Unity, an Animator is a connection to the objects being animated. (

 In the Scene view, position the car so that it’s on the far right side of the road, just before the Syn Cola sign (

We're now ready to record an animation of the car driving down the street. 

 button on the Car1 track to enter record mode. The red button will start blinking and the track will be highlighted red, indicating that it has been armed and is ready for recording. 

 In the Inspector, navigate to the car's Transform component, then right-click over the Position parameter and select 

 in the Scene view and drag on the blue translation gizmo to move the car forward until it reaches the intersection on the on the left side of the Game view (right before the pink and orange lanterns). A second keyframe will automatically be created. Click the Record button again to stop animating (

 button to play the Timeline from this point. 

Notice that there are different ways to create keyframes while the Timeline is in record mode. You can do it in the Transform properties, or by moving the GameObject in the Scene view. Also notice how parameters in the Inspector are highlighted in red when in record mode. This indicates that changes to these parameters will create a key on the Timeline.

Now you can play your animation by pressing the 

: If you are familiar with creating games in Unity, this is different from pressing Play in the Game view. Changes can be saved while a Timeline is playing outside of Game view, which will be essential to knowing when and how to modify the Timeline to correct changes. 

Notice how the car steadily accelerates when it starts moving and decelerates before it comes to a stop? The effect will be more pronounced when the keys are spread out over more frames (i.e., 600 frames as opposed to 120). This is due to the smooth animation curve that Unity has automatically applied to our animation. Let's take a look:

  Click the Animation Curves button beside the red Record button. This will expand the Animation Track to show the curve between the two keyframes we created (

Curves display the rate at which keys are interpolated, or transition into each other. They also help to visualize the motion of objects over time. The curve exists on a XY plane: along the x-axis is time (in frames) and along the y-axis is distance traveled (In Unity units).

For instance, this curve shows that, between Frame 0 and Frame 114, the value of Position.z (the blue curve representing the z-axis) increases slowly before moving at a steady rate. This is shown visually by the bend in the curve that transitions into a straight line. Before the value reaches the final keyframe, the curve bends again, this time so the value will slowly come to a stop.

Simply put, this says that the taxi is moving forward over time, easing into its maximum speed and easing out to a stop.

Congratulations! You’ve created your first animation in Unity! Let's apply what we learned to animate the other vehicles in this Scene.    

Animating the First Car

This Scene would look more lively with multiple vehicles passing along the street. Let's follow a similar set of steps to animate another taxi. 

 Collapse the Animation Track for Car1, by clicking on the Animation Curves button to the right of the Record button, then select the GameObject 

 Drag and drop the GameObject into the Timeline, then select 

 You will now see a new Animation Track under the Master Timeline with the Car2 Animator assigned to it.

 In the Scene view, position the car so that it’s at the far end of the intersection, behind the building with the rounded facade (

 Press the Record button on the Car2 track to enter record mode. 

We don't want both cars to begin moving at the same time. Let's create an offset so that the second car begins to move several frames after the first one. 

 in the Scene view, and drag on the blue z-axis to move the car forward until it passes the blue Syn Cola sign on the right side of the screen. If your car is moving sideways rather than forward, ensure that you are in 

) A second keyframe will automatically be created. Click the Record button again to stop animating. 

Now you can play your animation by pressing the Play button in the Timeline. You should see both cars moving in the Scene. (

Animating the Second Car

We’ve shown you how to animate two GameObjects moving in the environment. Sets are composed of both static and dynamic objects, however, so now we’re going to show you how to animate the movement of a stationary object, one that is not translated in space. Notice the two security cameras in the Game view. In this lesson, we'll have each security camera track left and right on a loop while the base of the camera remains attached to the wall.  

 Drag and drop the GameObject from the Hierarchy into the Timeline, then select 

 You will now see a new SecurityCam1 Animation Track under the Master Timeline track (

 button on the SecurityCam1 track to enter record mode again. 

 in the Hierarchy and expand it to reveal the SecurityCam_Top GameObject. Select this GameObject. 

 Go to the Inspector and in the Transform component, set the rotation in the y-axis to 

. This will create your first keyframe and rotate the security camera accordingly (

 Next, in the Timeline move your playhead to 

 Set the rotation in the y-axis to -36. This will create your second keyframe (

 Go to Frame 290 and set the rotation in the y-axis back to 

. This will create your third keyframe and complete the loop.  

 Click the Record button again to stop animating (

Congratulations! When you press Play in the Timeline, you should see the security camera sweep back and forth once until the playhead advances beyond the keyframe. 

While we have created a looping animation, what if we wanted the loop to continue indefinitely? This is where the concept of Clip Tracks will become handy. 

Animating the Security Camera

Unlike our cars, we want this security camera’s animation to loop throughout the duration of our Timeline. We could manually add keyframes to extend the animation, but not only would this be inefficient, it would also require more work if we wanted to change the duration of our animation in the Timeline.

A Clip Track can save any recorded animation into a clip that can then be repositioned or looped indefinitely. 

 track selected in the Timeline, click the 

 button (displayed as three vertical dots) in the upper-right corner and select 

. This will convert the keyed animation into a Clip Track (

Notice how the Clip Track that was created replaced the keyframes that were there before. 

 Now, select the clip that was just created in the SecurityCam1 track. In the top of the Inspector, rename the clip from 

 Navigate to the Animate Extrapolation tab and set the Post Extrapolate parameter to 

. This will make your animation loop throughout the remaining animation (

Every Animation Clip in Unity has a Pre-Extrapolate and Post-Extrapolate property. This means you can tell Unity what you want to happen before or after a clip is played. You will see the default value for the Post-Extrapolate setting is 

 — which means that when the clip is done, Unity will hold the pose from the clip's last frame forever. 

Clip Tracks showcase the flexibility of Unity's Timeline and function like media clips in traditional NLEs. Animation saved as a Clip Track can be looped, scaled, extended, truncated, and duplicated to further refine and better integrate pre-recorded animation into your Scenes. 

Converting to Clip Track

It’s important to stay organized as we begin to make more complex animations, so we will now group our Animation Tracks into a Track Group. Groups place our Animation Tracks into collapsible folders. Doing this helps to declutter our Timeline window. 

 Go to the Timeline, navigate to the plus sign and add a 

 in the Timeline, either in the Inspector or by double-clicking the 

 Click and drag the three tracks we created so far into the new Props Group (

You can now open and close the Props Group to hide and reveal the tracks. 

Organizing Your Animation Tracks into Track Groups

This unit covered the basics of creating animatics in Unity. We learned how animatics can be quickly produced by sharing animations across characters, recording keyframed animation to clips, and allowing animators to then rearrange, extend, or loop clips as part of a larger sequence. The ability to create animatics quickly and then refine them makes Unity a powerful animation tool. We’ll build on these skills in the next unit, where we’ll learn how to animate cameras with Cinemachine to turn these animations into shots. 

Unity Version 2019.4