1 The idea
In a graph editor each key has a handle (tangent) that sets the slope of the value curve at that key. Slope = speed. A flat handle means zero speed at that key; a steep one means the move enters or leaves the key fast.
The cyan curve below is speed (1 = average speed). At the start of this lesson the object hits the end at twice the average speed and stops dead, like hitting a wall. Drag the cyan points on the graph, or use the sliders.
speed at key 2 = (1 − y₂) ÷ (1 − x₂)2 Hands-on
Task: bring the speed at key 2 down to 0 (a smooth stop) without overshooting
The handle at key 2 must be flat: its value equals the key’s value
3 Deep dive
Two graphs, one move
The value graph shows where it is on each frame; the speed graph shows how fast it moves. Speed is the slope of the value graph, so the two are the same data seen two ways.
Some people shape the value graph because they see positions; others prefer the speed graph because acceleration and braking are obvious there. Try both.
- 1Steep handle
- 2High speed at the key
- 3Flat handle
- 4Speed 0 = soft stop
Handle length = influence
A handle’s direction sets the speed at the key; its length sets how long that speed holds before the curve turns away. A long handle at key 2 stretches the slow-down and makes it softer; a short one brakes late and abruptly.
| Handle at key 2 | On screen |
|---|---|
| Steep, pointing up | Crashes to a stop |
| Flat, short | Late, abrupt braking |
| Flat, long | Long, soft settle |
| Value above the key | Overshoots and returns |
Where it matters in comp
A jittery track, a fake camera move keyed over a locked-off plate, glow intensity keyed to a flickering light: all of these read in the graph editor. A wobbly curve means jitter; a sharp corner means a sudden change in speed.
If a move feels odd, open the speed graph: unintended corners show up there first.
4 In real work
In Nuke
- Curve Editor: select a key and drag its left/right handles to change the slope in and out.
- Right-click > Interpolation > Horizontal flattens the handles (speed 0 at that key).
- Right-click > Interpolation > Break unlinks the two handles so they can differ.
- Select an animated node and open the Curve Editor to see the curve of every keyed knob side by side.
Common mistakes → the fix
- ✗ Looking only at the value graph and deciding “it looks smooth”✓ A small kink in value can be a jump in speed. Check the slope at every key.
- ✗ Pulling a handle past the key’s value without noticing✓ Unless you want overshoot, keep handles within the key’s value.
- ✗ Flattening every key✓ A flat key in the middle of a move makes the object pause. Let middle keys flow through.
Before you send the shot
- Keys that should stop softly have flat handles
- No unintended overshoot (the curve stays within the keys)
- The speed graph has no unintended jumps
- Middle keys don’t make the object hesitate
5 Check yourself
In the graph editor the value curve is steep at the last key. What do you see on screen?
🔒 Answer the question above and this card opens
1. You want the object to leave key 1 fast. What do you do to the handle at key 1?
2. The speed graph drops from 2 to 0 in one frame at the last key. What do you see?
Where the numbers come from: The curve is a cubic Bézier of the same form as CSS cubic-bezier (time and value normalised to 0–1), and speed is its exact derivative. Each app’s graph editor defines handles a little differently, but “slope = speed” holds everywhere.