Straight lines and the things that lag behind

Almost nothing travels in a straight line

Default interpolation between two positions is a straight line, because a straight line is the simplest thing a computer can do. It is also close to the rarest path in the physical world.

The reason is joints. A hand moving across a desk pivots at the elbow and the shoulder, so its path is a shallow arc. A head turning to look at something sweeps. A thrown object follows a parabola. Even a car changing lanes traces an S, because steering is a rate of change of direction, not a direction.

So when animation reads as mechanical and the easing is already correct, the next thing to check is the path.

Making an arc

In most tools the position path is editable directly on the canvas, and adding an arc means dragging the spatial handle at the midpoint. A useful amount is small: for a 600-pixel horizontal move, a 40 to 80 pixel vertical bow is usually enough to remove the mechanical reading without anybody consciously noticing a curve.

Which way the arc bends carries meaning. Bowing upward reads as light: a thing lifted and set down. Bowing downward reads as heavy, or as something falling into place. Pick deliberately; the default is neither.

For interface motion the rule is narrower. Material Design’s guidance is that elements moving in two dimensions arc, and elements moving in one dimension do not. A card that travels both across and down arcs. A drawer sliding horizontally should not, because a curve implies a freedom the drawer does not have.

Follow-through, overlap and drag

Three related ideas, often confused, and each is a small offset in time.

• Overlap: parts start at different times. The body starts, then the arm.
• Follow-through: parts keep going after the main mass stops. The body lands, the coat keeps travelling for a few frames.
• Drag: a trailing part lags behind the whole way, never leading.

The numbers are small. At 24 fps, an offset of 2 to 4 frames is the working range for most secondary elements. Below 2 it is invisible. Above 6 it stops reading as attachment and starts reading as two separate animations.

A concrete rig you can build in ten minutes:

1. Parent a text layer to a null object.
2. Animate the null. This is your main mass.
3. Select the text layer’s own keyframes and drag them three frames later.
4. Add a 4% scale overshoot to the text only, settling two frames after the null stops.

The null arrives, the text catches up and settles. Nobody watching will describe it as follow-through. They will say it looks more expensive.

Where this is actively wrong

Follow-through on the element the user just touched is a bug, not a flourish.

The mechanism: the perceived responsiveness of an interface is measured from the input to the first visible change. If you delay the response of the thing under the finger by three frames to make it feel weighty, you have added 125ms to the perceived latency of every tap. The research on this is old and consistent: under about 100ms reads as instantaneous, and past roughly 300ms people start looking for a second thing to do.

So the split is: the control responds immediately, the scenery follows through. A button’s own press state has no lag. The sheet it opens can absolutely have a trailing header.

Secondary action

Separate from follow-through, and often what is missing when a piece feels thin. Secondary action is a different motion happening because of the main one, not a delayed copy of it.

• A card lifting: the shadow spreads and softens as it rises. That is the shadow doing a different thing, driven by height.
• A logo landing: a small ripple in the surface, or a two-frame flash of a highlight.
• A list re-ordering: the items that did not move dim very slightly so the one that did is readable.

The test for whether a secondary action is earning its place: remove it and see whether anything becomes harder to understand. If not, it is decoration, which is allowed once and not four hundred times.

Doing it in free tools

Blender: parent to an Empty, then use the Graph Editor to offset the child’s F-curves: select the keys and press G, X, and type the frame offset. It is exactly the four-step rig above.

Glaxnimate: group the layers and move the group’s keyframes; per-layer offsets are done by dragging keyframes in the timeline.

Kdenlive: harder, because its keyframing is per-effect rather than per-layer. For anything with more than two moving parts, do the motion elsewhere and bring in a transparent video or an image sequence with alpha.

The habit

When animation feels flat, ask two questions in order. Is anything travelling in a perfectly straight line that should not be? Is every part starting and stopping on the same frame? Those two faults account for most of the gap between animation that was keyframed and animation that was animated.