Motion blur will not fix a floaty logo

Motion blur will not fix a floaty logo

The usual sequence: an animation feels weightless, so the animator switches on motion blur, then lengthens the duration, then adds a glow. It still feels weightless, because none of those things is what creates weight.

Weight comes from spacing — how much distance the object covers on each individual frame. The classic animation principles were worked out for pencil drawings decades before computers, and they transfer directly to a logo sting or an interface transition. They are not about cartoons. They are about how eyes read movement.

Timing and spacing are two different things

Timing is how many frames the move takes. Spacing is how the distance is distributed across those frames. Easing, from the last lesson, is spacing seen from the curve's side.

A heavy object covers little ground on the first frames and a lot in the middle. A light object snaps. A thing landing covers most of its distance early and then takes a long, quiet settle. If you draw the object's position on each frame down a strip of paper, weight is visible as the gaps between the marks. Uneven gaps look alive. Even gaps look mechanical, no matter how long the animation runs.

The three moves that create weight

Anticipation

Before a thing moves forward, it moves back. A person about to jump crouches. A bat swings back before it swings through.

On a logo, this is tiny and lasts three or four frames: scale down to 0.96, then up past 1.0. On a button press, the button dips 2 pixels before the panel opens. On a card sliding in from the right, it slides 8 pixels further right first.

The reason it works is that it tells the eye where to look before the movement happens. Without it, motion arrives unannounced and the viewer spends the first frames finding it.

Overshoot and settle

Things with momentum do not stop exactly on their mark. They go past and come back.

A workable logo scale: 1.0 → 1.06 → 0.99 → 1.0, with the overshoot arriving fast and the settle taking two or three times as long as the overshoot did. For interface elements keep it far smaller — 1 or 2 per cent — or skip it entirely.

That last point is the honest limitation. Overshoot is decoration. On a checkbox someone ticks forty times a day it is charming once and irritating thereafter, and on text it is nearly always bad, because a bouncing glyph is measurably harder to read. Save springiness for once-per-session moments: a launch screen, a payment succeeding, a celebration.

Follow-through and overlapping action

Parts do not all stop at the same instant. A tagline under a logo should start moving three to five frames after the logo does, and arrive after it. A list of items should stagger by 30–50 ms each, not 200 — beyond about 60 ms the list stops reading as one gesture and starts reading as a queue.

• After Effects: select layers and use Animation → Keyframe Assistant → Sequence Layers, or offset the layers in the timeline by hand.
• CSS: animation-delay: calc(var(--i) * 40ms) with an index set per item.
• Resolve Fusion (free): offset the keyframes in the Spline editor.

A useful test: if you switch off every element except one, does that one element's motion still make sense on its own? If the whole thing only works as a synchronised block, it will feel stiff.

What motion blur is actually for

Motion blur is a consequence of a camera shutter being open while something moves. It does two real jobs: it stops fast motion from strobing, and it matches synthetic motion to live footage.

At 24 or 30 frames per second, an object crossing a large part of the frame in two or three frames will strobe — the eye sees separate copies rather than a movement. Blur solves that. It does not create mass, and adding it to a floaty animation gives you a floaty animation that is now slightly soft.

In After Effects, motion blur has to be enabled twice: on the layer and on the composition. Resolve's Fusion page has a MotionBlur node and per-transform blur settings. Blender renders it from the shutter setting. CSS has no motion blur, which is fine, because web motion is usually short enough not to need it.

One exercise

Take any twelve-frame move you have already made. Do not add a single effect. Move the middle keyframe so that the object is three-quarters of the way across at frame six instead of half. Add a four-frame anticipation at the start. Watch both versions back to back.

That is the entire difference between motion that reads as designed and motion that reads as a slide transition.