{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"arcs-and-follow-through","title":"Straight lines and the things that lag behind","url":"https://addaly.com/learn/motion-and-audio/arcs-and-follow-through","position":7,"of":72,"minutes":9,"answer":"Arcs and small two-to-four-frame offsets between parts are what separate animated motion from interpolated motion, but the element under the user's finger must never lag.","keyIdea":"Arcs and small two-to-four-frame offsets between parts are what separate animated motion from interpolated motion, but the element under the user's finger must never lag, because perceived responsiveness is measured from input to first visible change."},"body":{"format":"markdown","text":"## Almost nothing travels in a straight line\n\nDefault 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.\n\nThe 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.\n\nSo when animation reads as mechanical and the easing is already correct, the next thing to check is the path.\n\n## Making an arc\n\nIn 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.\n\nWhich 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.\n\nFor 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.\n\n## Follow-through, overlap and drag\n\nThree related ideas, often confused, and each is a small offset in time.\n\n- **Overlap**: parts start at different times. The body starts, then the arm.\n- **Follow-through**: parts keep going after the main mass stops. The body lands, the coat keeps travelling for a few frames.\n- **Drag**: a trailing part lags behind the whole way, never leading.\n\nThe 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.\n\nA concrete rig you can build in ten minutes:\n\n1. Parent a text layer to a null object.\n2. Animate the null. This is your main mass.\n3. Select the text layer's own keyframes and drag them three frames later.\n4. Add a 4% scale overshoot to the text only, settling two frames after the null stops.\n\nThe null arrives, the text catches up and settles. Nobody watching will describe it as follow-through. They will say it looks more expensive.\n\n## Where this is actively wrong\n\nFollow-through on the element the user just touched is a bug, not a flourish.\n\nThe 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.\n\nSo 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.\n\n## Secondary action\n\nSeparate 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.\n\n- A card lifting: the shadow spreads and softens as it rises. That is the shadow doing a different thing, driven by height.\n- A logo landing: a small ripple in the surface, or a two-frame flash of a highlight.\n- A list re-ordering: the items that did not move dim very slightly so the one that did is readable.\n\nThe 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.\n\n## Doing it in free tools\n\nBlender: 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.\n\nGlaxnimate: group the layers and move the group's keyframes; per-layer offsets are done by dragging keyframes in the timeline.\n\nKdenlive: 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.\n\n## The habit\n\nWhen 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."},"check":{"question":"A designer adds a three-frame follow-through to a button's own press state at 24fps, reasoning that it gives the button weight. Users report the app feels slower. What has actually changed?","options":[{"text":"Three frames of extra animation per tap accumulates across a session, so total time in animation has increased measurably.","correct":false,"tempting":"Focuses on aggregate time rather than the per-interaction perception that produces the complaint; users are reacting to each tap, not to a daily total."},{"text":"The overshoot contained in the follow-through means the button briefly renders larger than its pressed size, and users are interpreting that momentary size change as a rendering glitch rather than as intentional weight.","correct":false,"tempting":"Attributes the complaint to a visual artefact; users described slowness, which is a timing perception, not an appearance one."},{"text":"The follow-through is applied to the wrong layer, and the correct fix is to apply it to the button and remove it from the scenery.","correct":false,"tempting":"Inverts the rule: scenery is exactly where follow-through belongs, and the control is exactly where it does not."},{"text":"Perceived responsiveness is measured from the input to the first visible change, so delaying the touched element's response adds about 125ms of apparent latency to every tap.","correct":true}]},"prev":{"slug":"springs-instead-of-curves","title":"Springs, and what you give up for them","url":"https://addaly.com/learn/motion-and-audio/springs-instead-of-curves"},"next":{"slug":"twelve-principles-filtered","title":"The old principles, filtered for a screen seen four hundred times","url":"https://addaly.com/learn/motion-and-audio/twelve-principles-filtered"},"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) 'Straight lines and the things that lag behind', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/arcs-and-follow-through (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"Straight lines and the things that lag behind","courseTitle":"Motion, Sound and Music","module":{"index":1,"slug":"how-motion-reads-as-real","title":"How motion reads as real"},"answer":null,"keyIdea":"Arcs and small two-to-four-frame offsets between parts are what separate animated motion from interpolated motion, but the element under the user’s finger must never lag, because perceived responsiveness is measured from input to first visible change.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"almost-nothing-travels-in-a-straight-line","runs":[{"text":"Almost nothing travels in a straight line"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"So when animation reads as mechanical and the easing is already correct, the next thing to check is the path."}]},{"t":"h2","id":"making-an-arc","runs":[{"text":"Making an arc"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"follow-through-overlap-and-drag","runs":[{"text":"Follow-through, overlap and drag"}]},{"t":"p","runs":[{"text":"Three related ideas, often confused, and each is a small offset in time."}]},{"t":"ul","items":[[{"text":"Overlap","b":true},{"text":": parts start at different times. The body starts, then the arm."}],[{"text":"Follow-through","b":true},{"text":": parts keep going after the main mass stops. The body lands, the coat keeps travelling for a few frames."}],[{"text":"Drag","b":true},{"text":": a trailing part lags behind the whole way, never leading."}]]},{"t":"p","runs":[{"text":"The numbers are small. At 24 fps, an offset of "},{"text":"2 to 4 frames","b":true},{"text":" 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."}]},{"t":"p","runs":[{"text":"A concrete rig you can build in ten minutes:"}]},{"t":"ol","start":1,"items":[[{"text":"Parent a text layer to a null object."}],[{"text":"Animate the null. This is your main mass."}],[{"text":"Select the text layer’s own keyframes and drag them three frames later."}],[{"text":"Add a 4% scale overshoot to the text only, settling two frames after the null stops."}]]},{"t":"p","runs":[{"text":"The null arrives, the text catches up and settles. Nobody watching will describe it as follow-through. They will say it looks more expensive."}]},{"t":"h2","id":"where-this-is-actively-wrong","runs":[{"text":"Where this is actively wrong"}]},{"t":"p","runs":[{"text":"Follow-through on the element the user just touched is a bug, not a flourish."}]},{"t":"p","runs":[{"text":"The mechanism: the perceived responsiveness of an interface is measured from the input to the "},{"text":"first","i":true},{"text":" 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."}]},{"t":"p","runs":[{"text":"So the split is: "},{"text":"the control responds immediately, the scenery follows through.","b":true},{"text":" A button’s own press state has no lag. The sheet it opens can absolutely have a trailing header."}]},{"t":"h2","id":"secondary-action","runs":[{"text":"Secondary action"}]},{"t":"p","runs":[{"text":"Separate from follow-through, and often what is missing when a piece feels thin. Secondary action is a "},{"text":"different","i":true},{"text":" motion happening because of the main one, not a delayed copy of it."}]},{"t":"ul","items":[[{"text":"A card lifting: the shadow spreads and softens as it rises. That is the shadow doing a different thing, driven by height."}],[{"text":"A logo landing: a small ripple in the surface, or a two-frame flash of a highlight."}],[{"text":"A list re-ordering: the items that did not move dim very slightly so the one that did is readable."}]]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"doing-it-in-free-tools","runs":[{"text":"Doing it in free tools"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"Glaxnimate: group the layers and move the group’s keyframes; per-layer offsets are done by dragging keyframes in the timeline."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"the-habit","runs":[{"text":"The habit"}]},{"t":"p","runs":[{"text":"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."}]}],"check":{"question":[{"text":"A designer adds a three-frame follow-through to a button’s own press state at 24fps, reasoning that it gives the button weight. Users report the app feels slower. What has actually changed?"}],"options":[{"text":[{"text":"Three frames of extra animation per tap accumulates across a session, so total time in animation has increased measurably."}],"correct":false,"tempting":[{"text":"Focuses on aggregate time rather than the per-interaction perception that produces the complaint; users are reacting to each tap, not to a daily total."}]},{"text":[{"text":"The overshoot contained in the follow-through means the button briefly renders larger than its pressed size, and users are interpreting that momentary size change as a rendering glitch rather than as intentional weight."}],"correct":false,"tempting":[{"text":"Attributes the complaint to a visual artefact; users described slowness, which is a timing perception, not an appearance one."}]},{"text":[{"text":"The follow-through is applied to the wrong layer, and the correct fix is to apply it to the button and remove it from the scenery."}],"correct":false,"tempting":[{"text":"Inverts the rule: scenery is exactly where follow-through belongs, and the control is exactly where it does not."}]},{"text":[{"text":"Perceived responsiveness is measured from the input to the first visible change, so delaying the touched element’s response adds about 125ms of apparent latency to every tap."}],"correct":true,"tempting":null}],"order":[2,1,0,3],"why":null},"prev":{"slug":"springs-instead-of-curves","title":"Springs, and what you give up for them","minutes":10},"next":{"slug":"twelve-principles-filtered","title":"The old principles, filtered for a screen seen four hundred times","minutes":10}}}