Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

How-to

Shaping motion with the keyframe graph in Video by Zaweba

Open the keyframe graph in Video by Zaweba to see value or speed curves, drag keys and Bezier handles, and use auto or continuous Bezier for smooth motion.

Shaping motion with the keyframe graph in Video by Zaweba

Keyframes tell a setting where to be. The curve between them tells it how to get there, and that is where animation gets its feel. Video by Zaweba shows those curves in the keyframe graph, where you can see and shape the movement directly rather than guessing from numbers.

Opening the graph

Choose View > Keyframe graph. It shows the animated values of the selected clip as curves. You can view either the value or the speed.

The value view plots the setting itself against time. A scale going from 100 to 120 percent shows as a line rising between two keys. Its shape tells you how the change happens: a straight line is constant, an S shape eases in and out.

The speed view plots how fast the value is changing. It is often the more useful view for motion. A smooth move shows as a hill: starting slow, peaking in the middle, ending slow. A sudden start shows as a jump. Spikes and dips in the speed curve reveal motion that will look jerky even when the value curve looks fine.

Editing on the graph

Drag keys to change their value or time. Drag the Bezier handles that stick out from each key to shape the curve. Longer handles make a gentler ease; shorter ones make a sharper change. Tilting a handle changes how fast the value leaves or arrives at the key.

This is far more precise than choosing an ease from a list. You can make a move that starts very slowly and then accelerates hard, or one that overshoots and settles, by shaping the curve.

Auto and continuous Bezier

Two extra eases help keep curves smooth. Auto Bezier works out the handles for you so the curve flows smoothly through each key. It is a good default when you have several keys in a row and want the motion to pass through them without bumps.

Continuous Bezier keeps the handles on both sides of a key in line, so the curve does not kink at the key, while still letting you set their length and angle. Use it when you want control but need the motion to stay smooth through a key.

Curves for common moves

Smoothing a camera like move. A slow pan across a photo made with position keys may speed up and slow down unevenly. In the speed view, shape the curve into an even hill and the move becomes calm.

Making things land. A title flying in should slow down as it arrives. Drag the handle at the final key to make a long, gentle approach.

Adding snap. A logo that pops in looks better if it accelerates hard, then stops. Shape the curve to a steep start and a short ease at the end.

Matching motion. When two elements need to move together, compare their curves and make them match.

Start by looking at the speed view for anything that moves. If the speed curve has sudden steps, the motion will look abrupt. If it has sharp spikes, something will jolt. A smooth curve almost always means smooth motion.

Use the value view for settings where the level matters more than the movement, like opacity, volume or a colour value. There, you care about where the value is at a given moment.

Curves that go wrong

Overworking curves is easy. A few adjustments to handles usually do the job; if a curve has become a tangle, delete the extra keys and start with two.

Another is shaping value curves when the problem is speed. If motion looks jerky, check the speed view before dragging value handles.

The graph among the other key views

The keyframe graph edits the same keys you set with the diamond button, the rubber bands on the timeline and the motion path on the preview. Use the diamond to place keys, then come to the graph in Video by Zaweba when the timing of a move needs care. It is the tool that turns movement that merely works into movement that feels right.