Animating with Keyframes

Tooll features very sophisticated functions for animating Value-parameters with keyframes. The primary-tools for this are the Timeline-area and the Parameter View.

Animating parameters

Let's create some keyframes:

1. Go to your [Home]-operator
2. Create a [Cube]
3. In the Parameter-View right click on Height and select "Animate".

This add a keyframe at the current time. Note how everything related to animation and time uses an orange color:

• the operator has an orange animation indicator the right edge
• the name and value of the parameter are highlighted
• next to the height parameter-you see the orange keyframe buttons
• and in the timeline-area you see a new keyframe right at the…
• orange Current Time Indicator

Controlling the time and playback

You have several options to control time and playback:

Click on the Timeline to focus it (it notice the gray outline). Then…

• Drag the Current time marker in lower area with the time-ticks and current time numbers.
• Press [L] or [Space] to start playback
• Press [K] or [Space] stop playback
• Press [J] to play backwards
• Press [L] or [J] again to double playback speed
• Press [,] and [.] to jump between keyframes of the current animation curve
• Press [F] to adjust the view to show all or just the selected keyframes

To control the timeline you can…

• Drag with the [Right-Mouse-button]]
• Rotate the mouse-wheel to scale time
• [ALT]+[Mousewheel] to scale the value range

Controlling keyframes values

Let's try to playback…

1. Make sure the [Cube] is selected and it still has the keyframe you created earlier.
2. Press [L] to start playback.
3. After some seconds press [K] to stop the playback.

Note how the key-frame-buttons left of the parameter-name changed: Now the button pointing to the left is orange, indicating the existence of a keyframe earlier in time. The current and right keyframe buttons are off, because there are no keyframes define for the current time or later.

Let's add another keyframe:

1. Drag the value of the animated .Height parameter.

Note how the Keyframe-button becomes active, because when changing animated parameters, you always insert a new keyframe.

2. Press the "Left Keyframe-button" (The orange triangle pointing to the left)
3. Again change the .Height Parameter

Note how you just updated an existing keyframe. You should see the animation curve updating in the Timeline Area.

4. Press the orange "Keyframe-button" (the rotated orange square)

In the Timeline you can see, that you just removed the keyframe that you set earlier for that time. Manipulating Keyframes

To manipulate keyframes you can either:

• modify its value in the ''Parameter View''
• drag the keyframe in the Timeline
• select several Keyframes and use the Keyframe Edit box

We already discussed the first option. Now we should quickly talk about the two others

Dragging single keys

Try to drag any key (it doesn't matter if it's selected). You will notice that the movement is locked horizontally or vertically. This might feel awkward at first, but when working more with keyframes, you'll learn that most of the time you either want to manipulate its time OR its value – rarely both. That's why after a certain threshold that movement gets locked into one of the two options. However, you can do this by holding [ALT]+[CTRL] while moving.

Snapping to time

While dragging a single keyframe horizontally, in other words changing its time, you might noticed how it snaps to the ''Current time marker'' and the black lines in the background. The black lines are indicating the bars and beats for the current Beats Per Minute (BPM) that you can set for a project. We will explain this in more detail later.

You can toggle the snapping behavior by holding [SHIFT] while moving the key.

Using the Keyframe-Edit-Box

The ''Edit-Box'' helps you to quickly adjust several selected keyframes:

• Drag them around with the central cross
• To drag keyframes around horizontal and vertically at once, start dragging precisely at the cross
• Drag the sides and edges to scale the distribution or values of keyframes.

The numbers above and below show the maximum and minimum values. The numbers left and right the start and end-times of the selected keyframes in seconds. The Edit-Box snaps by default to the current time, edges of [TimeClip]s and Beat-marks. Press the [SHIFT]-key to disable snapping.

Hint: You can also use the Edit-box to conform the values of some keyframes: You can select every second keyframe, move the upper edge onto the lower edge (now all keyframes have the same value) and now drag the box vertically to the desired value. With the right zoom-value, it will snap to round values like 0.0, 1.0, etc.

Toggling Curve Visibility

Remember, that Operators with animated parameters will have an Animation Indicator in form of an orange rectangle on the right side. If you select an animated Operator, the curves of all its animated parameters are shown in the timeline area. This is okay, if only a few of these parameters are animated, but it can become tricky to pick the right curve, if there are many of them. In this case, you can focus only a single curve by clicking on orange parameter name in the parameter view. Click this parameter again, to see all curves again. Or click another curve, to add it to the focused selection.

Here is an example:

1. Create a [Cube]
2. Change .Color to a brown tone.
3. Right-click the animation buttons of the .Color-parameter and select "Animate".
4. Click the small button on the left side of the Color-parameter to unfold the group.
5. Click Color.R to focus only on the red-Color.
6. Click Color.A to add the Alpha-channel to the focus.

Keyframe Interpolation

To change to interpolation type, right click on the timeline-area and select the new type from the context menu. If no keyframes are selected, the new setting will be used for all keys in the active curves. The type of interpolation between two keys depends on what you want to achieve.

Interpolation types

Most of the time, using a smooth interpolation will look best. (For the curious control-freaks among you, the smooth interpolation is to a monotone cubic interpolation that prevents overshooting by adjusting the tangents to the neighboring keyframes).

There are situations, however, when you want to make you, that the value smoothly enters a keyframe, which calls for the horizontal mode.

And somethings it's important that interpolation has a controlled linear shape. Like when animating the time of a playback.

If you want to have discrete jumps from one value to another, you can set the interpolation to constant.

And for all the settings, you can always break the tangents by dragging the tangents on either side. You can unlock the tangents by pressing the [Shift]-key.

Extending Curves

By default, the curve ends with the last defined keyframe. If you move the time beyond the threshold the animation always keeps the value of this last defined keyframe. Most of the time, this is what you want, but sometimes extending curves beyond the last or first keyframe can be extremely helpful.

The timeline-context-menu provides the following options:

• Constant (the default) – just repeats value of the outer keyframes forever
• Ping-Pong – Plays the animation backwards until it reaches the first keyframe and starts all over again. This can be super helpful for things like sin-waves or jump-animations.
• Repeat – Starts the animation from the beginning. Use this option to define saw-tooth like curves.
• Repeat Continuously – is extremely useful: It is similar to repeat with the difference that the curve will start over continuing the final value. It's mostly used for defining endless slopes by setting two keyframes with linear interpolation.