{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"weight-comes-from-spacing","title":"Motion blur will not fix a floaty logo","url":"https://addaly.com/learn/motion-and-audio/weight-comes-from-spacing","position":2,"of":72,"minutes":9,"answer":"Weight is uneven distance-per-frame plus a small anticipation and settle; effects added afterwards cannot supply it.","keyIdea":"Weight is uneven distance-per-frame plus a small anticipation and settle; effects added afterwards cannot supply it."},"body":{"format":"markdown","text":"## Motion blur will not fix a floaty logo\n\nThe 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.\n\nWeight 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.\n\n## Timing and spacing are two different things\n\nTiming 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.\n\nA 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.\n\n## The three moves that create weight\n\n### Anticipation\n\nBefore a thing moves forward, it moves back. A person about to jump crouches. A bat swings back before it swings through.\n\nOn 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.\n\n> Figure: The four parts of a logo move that has weight. Steps: 1. Anticipation (three or four frames back, scale to 0.96); 2. The travel (uneven distance per frame, most of it early); 3. Overshoot (past the mark to about 1.06, arriving fast); 4. Settle (back to 1.0, taking two or three times longer). None of these is an effect. Weight is the distribution of distance across frames plus a wind-up before and a settle after, and a piece that has none of them stays weightless however much blur and glow are added. Motion blur has one real job (stopping fast motion strobing) and supplying mass is not it.\n\nThe 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.\n\n### Overshoot and settle\n\nThings with momentum do not stop exactly on their mark. They go past and come back.\n\nA 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.\n\nThat 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.\n\n### Follow-through and overlapping action\n\nParts 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 to 50 ms each, not 200: beyond about 60 ms the list stops reading as one gesture and starts reading as a queue.\n\n- **After Effects**: select layers and use **Animation → Keyframe Assistant → Sequence Layers**, or offset the layers in the timeline by hand.\n- **CSS**: `animation-delay: calc(var(--i) * 40ms)` with an index set per item.\n- **Resolve Fusion** (free): offset the keyframes in the Spline editor.\n\nA 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.\n\n## What motion blur is actually for\n\nMotion 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.\n\nAt 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.\n\nIn 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.\n\n## One exercise\n\nTake 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.\n\nThat is the entire difference between motion that reads as designed and motion that reads as a slide transition."},"check":{"question":"A client says a logo animation feels floaty and weightless. The animator switches on motion blur and extends the duration from 0.6 to 1.2 seconds. It still feels weightless. What is the actual fix?","options":[{"text":"Redistribute the distance across the frames (cover most of the travel in the first few frames and give it a long settle) and add a few frames of anticipation before the move.","correct":true},{"text":"Extend the duration further, since a heavier object should take longer to complete the same move.","correct":false,"tempting":"Assumes weight is a function of how long a move takes rather than how its distance is distributed."},{"text":"The motion blur was applied at the wrong shutter angle, so it is not reading as real camera blur.","correct":false,"tempting":"Treats a rendering setting as the source of perceived mass rather than a way of stopping fast motion strobing."},{"text":"Add a soft drop shadow and a slight perspective tilt so the logo reads as a physical object in space.","correct":false,"tempting":"Confuses static depth cues with the temporal cues that make something feel heavy."}]},"prev":{"slug":"nothing-starts-at-speed","title":"Nothing in the world starts at full speed","url":"https://addaly.com/learn/motion-and-audio/nothing-starts-at-speed"},"next":{"slug":"frames-are-the-unit","title":"Frames, not seconds","url":"https://addaly.com/learn/motion-and-audio/frames-are-the-unit"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'Motion blur will not fix a floaty logo', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/weight-comes-from-spacing (Accessed: 31 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"Motion blur will not fix a floaty logo","courseTitle":"Motion, Sound and Music","module":{"index":1,"slug":"how-motion-reads-as-real","title":"How motion reads as real"},"answer":null,"keyIdea":"Weight is uneven distance-per-frame plus a small anticipation and settle; effects added afterwards cannot supply it.","hero":{"kind":"figure","figure":{"t":"figure","label":"Figure","figure":{"type":"flow","steps":[{"label":"Anticipation","detail":"three or four frames back, scale to 0.96"},{"label":"The travel","detail":"uneven distance per frame, most of it early"},{"label":"Overshoot","detail":"past the mark to about 1.06, arriving fast"},{"label":"Settle","detail":"back to 1.0, taking two or three times longer"}],"title":"The four parts of a logo move that has weight","caption":"None of these is an effect. Weight is the distribution of distance across frames plus a wind-up before and a settle after, and a piece that has none of them stays weightless however much blur and glow are added. Motion blur has one real job (stopping fast motion strobing) and supplying mass is not it."},"alt":"Figure: The four parts of a logo move that has weight. Steps: 1. Anticipation (three or four frames back, scale to 0.96); 2. The travel (uneven distance per frame, most of it early); 3. Overshoot (past the mark to about 1.06, arriving fast); 4. Settle (back to 1.0, taking two or three times longer). None of these is an effect. Weight is the distribution of distance across frames plus a wind-up before and a settle after, and a piece that has none of them stays weightless however much blur and glow are added. Motion blur has one real job (stopping fast motion strobing) and supplying mass is not it."}},"blocks":[{"t":"h2","id":"motion-blur-will-not-fix-a-floaty-logo","runs":[{"text":"Motion blur will not fix a floaty logo"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"timing-and-spacing-are-two-different-things","runs":[{"text":"Timing and spacing are two different things"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"the-three-moves-that-create-weight","runs":[{"text":"The three moves that create weight"}]},{"t":"h3","id":"anticipation","runs":[{"text":"Anticipation"}]},{"t":"p","runs":[{"text":"Before a thing moves forward, it moves back. A person about to jump crouches. A bat swings back before it swings through."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h3","id":"overshoot-and-settle","runs":[{"text":"Overshoot and settle"}]},{"t":"p","runs":[{"text":"Things with momentum do not stop exactly on their mark. They go past and come back."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h3","id":"follow-through-and-overlapping-action","runs":[{"text":"Follow-through and overlapping action"}]},{"t":"p","runs":[{"text":"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 to 50 ms each, not 200: beyond about 60 ms the list stops reading as one gesture and starts reading as a queue."}]},{"t":"ul","items":[[{"text":"After Effects","b":true},{"text":": select layers and use "},{"text":"Animation → Keyframe Assistant → Sequence Layers","b":true},{"text":", or offset the layers in the timeline by hand."}],[{"text":"CSS","b":true},{"text":": "},{"text":"animation-delay: calc(var(--i) * 40ms)","code":true},{"text":" with an index set per item."}],[{"text":"Resolve Fusion","b":true},{"text":" (free): offset the keyframes in the Spline editor."}]]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"what-motion-blur-is-actually-for","runs":[{"text":"What motion blur is actually for"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"one-exercise","runs":[{"text":"One exercise"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"That is the entire difference between motion that reads as designed and motion that reads as a slide transition."}]}],"check":{"question":[{"text":"A client says a logo animation feels floaty and weightless. The animator switches on motion blur and extends the duration from 0.6 to 1.2 seconds. It still feels weightless. What is the actual fix?"}],"options":[{"text":[{"text":"Redistribute the distance across the frames (cover most of the travel in the first few frames and give it a long settle) and add a few frames of anticipation before the move."}],"correct":true,"tempting":null},{"text":[{"text":"Extend the duration further, since a heavier object should take longer to complete the same move."}],"correct":false,"tempting":[{"text":"Assumes weight is a function of how long a move takes rather than how its distance is distributed."}]},{"text":[{"text":"The motion blur was applied at the wrong shutter angle, so it is not reading as real camera blur."}],"correct":false,"tempting":[{"text":"Treats a rendering setting as the source of perceived mass rather than a way of stopping fast motion strobing."}]},{"text":[{"text":"Add a soft drop shadow and a slight perspective tilt so the logo reads as a physical object in space."}],"correct":false,"tempting":[{"text":"Confuses static depth cues with the temporal cues that make something feel heavy."}]}],"order":[3,0,2,1],"why":null},"prev":{"slug":"nothing-starts-at-speed","title":"Nothing in the world starts at full speed","minutes":9},"next":{"slug":"frames-are-the-unit","title":"Frames, not seconds","minutes":9}}}