For preparatory information on keyframes, you should read the preceding document:
The following general notes are meant to assist you with the Graph Editor in the After Effects Timeline.
The notes will also help to prepare you for planning digital cutouts and the Camera Layer with 3D Layers. At the end of this blog page, you will find links to companion information on animating digital cutouts and camera moves.
The Graph Editor
The Graph Editor Button is located along the top-edge of the columns before the Timeline. Click on it to open the Graph Editor.
In the Graph Editor, you will find additional buttons and pull-down menu items located on the lower-region of the window:
a) Select to choose Properties that you would like to show in the Graph Editor. Click to pull down and pick features such as:
- Selected Properties
- Animated Properties
- Graph Editor Set
- Note – You can proceed with using all three
b) Select to choose Graph Type and Options. Click to pull down and pick features such as:
- Auto-Select Graph Type
- Edit Value Graph
- Edit Speed Graph
- Etc.
- Note – Using “Auto-Select Graph” is a good way to work
These buttons relate to the graph layout:
- c) Click to show Transform Box when multiple keys are selected
- d) Snap
- e) Auto zoom graph height
- f) Fit selection to view
- g) Fit all graphs to view
h) Separate dimensions – click to separate dimensions into their X, Y and Z axes
i) Edit selected keyframes. Click to pull down and pick features such as:
- Display Value
- Edit Value
- Toggle Hold Keyframe
- Keyframe Interpolation
These buttons relate to different kinds of keyframes and their particular qualities (e.g., the conditions of motion)
- j) Convert selected keyframes to Hold
- k) Convert selected keyframes to Linear
- l) Convert selected keyframes to Auto Bezier
- m) Easy Ease
- n) Easy Ease In
- o) Easy Ease Out
The following are buttons to activate qualities that we would typically use for keyframe animation.
Separate Dimensions
Click on the icon above to separate dimensions into their X, Y and Z axes.
You can elect to represent a move as split into component axes. Typically, After Effects shows Position qualities in the Timeline as “x,y” for default layers or “x,y,z” as 3D layers For example, if you refer to the Position feature in a layer, the orientation would be represented as:
- 960.0, 540.0
- If you set the layer to 3D = 960.0, 540.0, 0.0
If you choose to use the Graph Editor and click on the Separate Dimensions button, After Effects will organize the Position qualities as distinct axes:
- X Position: 960.0 (indicated in Red)
- Y Position: 540.0 (indicated in Green)
- If you set the layer to 3D = Z Position: 0.0 (indicated in Blue)
Using this feature will help you with planning camera moves.
Easy Ease
The Easy Ease button is important. Once you select a keyframe or multiple keyframes in the Graph Editor, the software will convert the default Linear keyframes to Bezier keyframes, with:
- Bezier handles, which function as:
- Influence handles
Adjusting the Bezier/influence handles will change the degree of the motion or velocity; that is, the steepness or, conversely, gradualness, of the move/phrase between keyframes.
This is important because, as animators, we must always be cognizant of the quality and tempo of a particular movement. When you initially set keyframes in After Effects, the program sets default Linear keyframes, with constant motion. However, you already have experience with animation principles, and you know that when characters and objects act naturally, they do not move in straight lines and with constant tempos. Instead, objects and characters move in arcs, accelerating and decelerating, slowing in and slowing out, easing in and easing out — with a wide range of degrees, from steep to gradual.
By using the Easy Ease button, you will immediately convert the default Linear keyframe to a move that you can then adjust and tweak, to suit the particular phrase that you are animating. Really, activating Easy Ease and converting to Bezier keyframes is step two of the animation process.
- Moving an influence handle away from a keyframe will shape a path with a more gradual incline and therefore a gentler slow in / slow out.
- Moving an influence handle towards a keyframe will shape a path with a steeper incline and therefore a quicker slow in / slow out.
Linear Keyframes
My complaint with a lot of undergraduate digital animation, when students use programs like After Effects and/or Maya to animate, is that people set default keyframes (i.e., default Linear keyframes) but then do not subsequently adjust the quality and timing of the movement phrase. You must go back and fine-tune the keyframes, otherwise the movement will not move naturally, will be flat, lack weight, and seem lifeless.
Bezier Keyframes
The above image shows two keyframes once they have been converted to Bezier keyframes, by applying the Easy Ease button. Note this path has arcs, indicating the motion slows in and then slows out. There are cushions or tapers on each side of the keyframes. Furthermore, each keyframe comes with influence handles, which you can adjust by grabbing a handle by the end and moving to the left or right, or up and down. This is where you would fine-tune a movement.
Observe Paths in Both the Graph Editor and Composition Window
While you make the adjustment to the temporal path in the Timeline, at the same time you should observe what is happening with the spatial path in the Composition Window, because the two paths correlate. When you adjust the timing and shape of the path in the Timeline, doing so will adjust the timing and shape of the path in the Composition Window. The two are actually the same path, represented in two corresponding windows/spaces.
While you work ahead, you should also RAM Preview the animation regularly. Do this by pressing the “0” key on the Numeric Key Pad. You should also adjust the Work Area in the Timeline to narrow the region that After Effects previews — in and around the particular phrase that you are animating.
Convert to Hold Keyframes
Click on the above button to convert selected keyframes to Hold keyframes.
This feature is useful in a couple of ways.
You would apply it to create holds for keyframes, when no animation/movement will follow for a period of time. For example, if a layer/object decelerates to a stop and needs to hold for two seconds, you would convert the keyframe to a Hold. Moving down the Timeline two seconds later, you would then set a new keyframe and convert that to an Easy Ease. You would then adjust the influence handles to change the nature of the ease, appropriately for the movement you are developing.
The other use for Hold keyframes is to create typical frame-by-frame animation. With Hold keyframes, After Effects will not interpolate between the keyframes. Therefore, you can set your own manually adjusted keyframes. This method is good for digital cutout animation, or to animate irregular motion tempos.
Convert to Linear Keyframes
Click on the above button to convert selected keyframes to Linear keyframes.
Of course, there is nothing wrong with Linear or Constant motion. The tempo is a part of a vocabulary of movement that you will always rely on. Therefore, don’t resist from using this tempo appropriately. Remember, when animating, you will often design a movement that starts from a hold, accelerates into a constant phrase for a longer period, and then decelerates down to a hold again.
As a result, you would use hold, Bezier, Linear, and then Bezier and Hold keyframes to create the movement.
Easy Ease In
You would use this button to affect only one aspect of a keyframe. As I indicated above, when you choose Easy Ease, doing so will set Bezier/influence handles on both sides of a keyframe. Easy Ease In, on the other hand, will only affect “going in” to a key frame. For example:
- In the Graph Editor, select a keyframe.
- Click on Easy Ease In.
- Doing so will add an influence handle on the “left-hand side” of the keyframe.
- This will seem as though a move “slows out” or “cushions” prior to the keyframe (which might appear to contradict the term “easy in”).
- Make sure you observe the nature of the keyframe and how it affects both the temporal and spatial motion paths.
Easy Ease Out
As is the case with Easy Ease In, you would use this button to affect only one aspect of a keyframe. Easy Ease Out will only affect “going in” to a key frame. For example:
- In the Graph Editor, select a keyframe.
- Click on Easy Ease Out.
- Doing so will add an influence handle on the “right-hand side” of the keyframe.
- This will seem as though a move “slows in” or “cushions” after to the keyframe (which might appear to contradict the term “easy out”).
- Make sure you observe the nature of the keyframe and how it affects both the temporal and spatial motion paths.
Convert to Auto Bezier
You would use this button to blend the qualities of two different motion tempos; that is, before a specific keyframe and after it. Often, when you set keyframes and design sequential movement phrases, you will find that one section has a particular tempo and the one following is different. For example, when an object accelerates into a constant tempo, which continues on for a period of time, as you play the movement, there will be a jump between the two phrases.
To blend the two together, so that there is not an abrupt leap from one tempo to the next, click on the Convert to Auto Bezier button, to balance the two sections.
RAM Preview
To play an animation sequence, especially if your composition is complex or dense with several layers and effects, you should use the RAM Preview option. After Effects will build a preview file and load it into the RAM, so that it plays in real-time.
Before you RAM Preview a sequence, you should use the Work Area Bar to set a preview region.
- To play the RAM Preview, go to the the Time Controls and click on the RAM Preview Button; or, alternatively, go to the Main Menu > Composition > Preview > RAM Preview.Timeline Navigator. Click and drag the right-handle to magnify the details in the Timeline towards single-frames, or to zoom out to a broader view of the Timeline; click and drag the middle of the Navigator to move the Navigator around the Timeline.
- Work Area Bar. Click and drag the left- and right-handles to increase and decrease the work area region; click and drag the middle-section of the Work Area Bar to shift the region along the Timeline.
To play the RAM Preview, go to the Time Controls and click on the RAM Preview Button. Or, alternatively, go to the Main Menu > Composition > Preview > RAM Preview.
RAM Preview Button (click to play)