{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"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","position":8,"of":72,"minutes":10,"answer":"Film motion is watched once and interface motion is watched hundreds of times, so anticipation.","keyIdea":"Film motion is watched once and interface motion is watched hundreds of times, so anticipation, exaggeration and squash-and-stretch (the principles that make a single viewing memorable) are precisely the ones that must be reduced or dropped on a screen somebody uses every day."},"body":{"format":"markdown","text":"## A different viewing contract\n\nThe twelve principles of animation were written at Disney for film. Film is watched once, in the dark, with attention. An interface is watched hundreds of times, on a bus, by somebody trying to do something else. A motion graphic on social sits in the middle: watched once by most people, forty times by whoever made it.\n\nThat difference is the filter. A principle designed to hold attention on a single viewing can be actively hostile at the four-hundredth.\n\nHere is each one with a verdict.\n\n## Survives without modification\n\n**Slow in and slow out.** This is easing. It is not a stylistic choice; it is the difference between motion and teleportation with a delay.\n\n**Timing.** How long something takes is still the primary carrier of weight and meaning. Nothing has replaced it.\n\n**Arcs.** Still true, still mostly ignored, still free.\n\n**Staging.** Arguably more important on a screen than on film, because the viewer can look away and there is no director controlling the cut. If two things move at once and neither is dominant, both are missed.\n\n**Solid drawing.** Originally about drawing volume convincingly. It survives as: respect the geometry. If a card has a perspective, keep it consistent; if a shape has a light source, do not let it move independently of the shape.\n\n## Survives with a restriction\n\n**Follow-through and overlapping action.** Yes, for secondary elements. Never for the control under the finger, for the reason in the previous lesson.\n\n**Secondary action.** Yes, when it carries information. A shadow that spreads as a card rises tells you about height. A sparkle tells you nothing.\n\n**Appeal.** Survives as brand fit. It is a real constraint and it is not a personal preference: a bank and a game want different motion, and the difference is measurable in duration and overshoot before it is anything else.\n\n**Straight-ahead and pose-to-pose.** Pose-to-pose is what keyframing is; you set the extremes and let the machine fill in. Straight-ahead (drawing every frame in order) survives in frame-by-frame work, and is exactly what Blender's grease pencil and Krita's animation timeline are for. It produces motion no interpolation would ever generate, at a cost of hours.\n\n## Dangerous, and here is the mechanism\n\n**Anticipation.** In film, a character winds up before a throw, and the wind-up is what makes the throw read. In an interface, anticipation means moving *away* from where the user asked you to go before going there. That is time added between the input and the answer, and the answer is what they wanted. Anticipation on a tap response is a bug.\n\nWhere it still works on a screen: in motion that nobody is waiting on. A logo sting can wind up. A page transition triggered by the system can. A button cannot.\n\n**Squash and stretch.** Designed for bodies made of flesh, which deform. A card in an interface represents a rigid object, and stretching it reads as rubber rather than as speed. But the principle underneath (that a change of shape communicates force) survives at small amplitudes. A 2 to 4% squash on a button press is felt and not seen; a 20% squash is a cartoon.\n\nThe other risk is that squash and stretch applied to text makes the letterforms wrong. Scaling type non-uniformly is a typographic error that happens to be animated.\n\n**Exaggeration.** The principle most damaged by the viewing contract. Exaggeration is what makes a single viewing legible and memorable. It is also what makes the four-hundredth viewing unbearable. The practical rule: the more often a motion will be seen, the closer to literal it should be. A splash screen can be exaggerated; a keyboard cannot.\n\n## The test worth applying\n\nBefore shipping any interface motion, watch it twenty times in a row. Not twice: twenty. Almost every motion that is too long, too bouncy, or too clever fails this and nothing else catches it. The first viewing tells you whether it is charming. The twentieth tells you whether you can live with it.\n\nFor motion graphics destined to be watched once, invert the test: show it to somebody who has never seen it, once, and then ask them what it said. If they can tell you, exaggeration did its job.\n\n## What the principles do not cover\n\nThey were written before screens that talk back. Nothing in the twelve addresses interruption, gesture tracking, reduced-motion preferences, or a state machine with six states and twenty transitions between them. Those are new problems, and the honest position is that the field has not settled on answers for them the way it settled on easing. Treat the twelve as a good foundation with known gaps, not as a complete theory."},"check":{"question":"Why is anticipation, which makes a character's throw read convincingly on film, treated as a defect when applied to a button's response to a tap?","options":[{"text":"Anticipation requires squash and stretch to read, and rigid interface elements cannot squash.","correct":false,"tempting":"Bundles two separate principles; anticipation is a movement away from the target and needs no deformation at all."},{"text":"It inserts movement away from the requested result before the result, adding time between the user's input and the answer they asked for.","correct":true},{"text":"Interface animation durations are far too short for an anticipation move to become visible at all, so adding one is simply wasted effort on the animator's part rather than something that harms the experience.","correct":false,"tempting":"Says it is merely useless; the complaint is that it is felt as latency, which means it is visible enough to cost something."},{"text":"Anticipation was designed for hand-drawn frames and does not survive interpolation between keyframes.","correct":false,"tempting":"Attributes the problem to the technique rather than the viewing contract; anticipation interpolates perfectly well and is used in motion graphics."}]},"prev":{"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"},"next":{"slug":"where-the-eye-is","title":"Where the eye already is","url":"https://addaly.com/learn/motion-and-audio/where-the-eye-is"},"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) 'The old principles, filtered for a screen seen four hundred times', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/twelve-principles-filtered (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":"The old principles, filtered for a screen seen four hundred times","courseTitle":"Motion, Sound and Music","module":{"index":1,"slug":"how-motion-reads-as-real","title":"How motion reads as real"},"answer":null,"keyIdea":"Film motion is watched once and interface motion is watched hundreds of times, so anticipation, exaggeration and squash-and-stretch (the principles that make a single viewing memorable) are precisely the ones that must be reduced or dropped on a screen somebody uses every day.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"a-different-viewing-contract","runs":[{"text":"A different viewing contract"}]},{"t":"p","runs":[{"text":"The twelve principles of animation were written at Disney for film. Film is watched once, in the dark, with attention. An interface is watched hundreds of times, on a bus, by somebody trying to do something else. A motion graphic on social sits in the middle: watched once by most people, forty times by whoever made it."}]},{"t":"p","runs":[{"text":"That difference is the filter. A principle designed to hold attention on a single viewing can be actively hostile at the four-hundredth."}]},{"t":"p","runs":[{"text":"Here is each one with a verdict."}]},{"t":"h2","id":"survives-without-modification","runs":[{"text":"Survives without modification"}]},{"t":"p","runs":[{"text":"Slow in and slow out.","b":true},{"text":" This is easing. It is not a stylistic choice; it is the difference between motion and teleportation with a delay."}]},{"t":"p","runs":[{"text":"Timing.","b":true},{"text":" How long something takes is still the primary carrier of weight and meaning. Nothing has replaced it."}]},{"t":"p","runs":[{"text":"Arcs.","b":true},{"text":" Still true, still mostly ignored, still free."}]},{"t":"p","runs":[{"text":"Staging.","b":true},{"text":" Arguably more important on a screen than on film, because the viewer can look away and there is no director controlling the cut. If two things move at once and neither is dominant, both are missed."}]},{"t":"p","runs":[{"text":"Solid drawing.","b":true},{"text":" Originally about drawing volume convincingly. It survives as: respect the geometry. If a card has a perspective, keep it consistent; if a shape has a light source, do not let it move independently of the shape."}]},{"t":"h2","id":"survives-with-a-restriction","runs":[{"text":"Survives with a restriction"}]},{"t":"p","runs":[{"text":"Follow-through and overlapping action.","b":true},{"text":" Yes, for secondary elements. Never for the control under the finger, for the reason in the previous lesson."}]},{"t":"p","runs":[{"text":"Secondary action.","b":true},{"text":" Yes, when it carries information. A shadow that spreads as a card rises tells you about height. A sparkle tells you nothing."}]},{"t":"p","runs":[{"text":"Appeal.","b":true},{"text":" Survives as brand fit. It is a real constraint and it is not a personal preference: a bank and a game want different motion, and the difference is measurable in duration and overshoot before it is anything else."}]},{"t":"p","runs":[{"text":"Straight-ahead and pose-to-pose.","b":true},{"text":" Pose-to-pose is what keyframing is; you set the extremes and let the machine fill in. Straight-ahead (drawing every frame in order) survives in frame-by-frame work, and is exactly what Blender’s grease pencil and Krita’s animation timeline are for. It produces motion no interpolation would ever generate, at a cost of hours."}]},{"t":"h2","id":"dangerous-and-here-is-the-mechanism","runs":[{"text":"Dangerous, and here is the mechanism"}]},{"t":"p","runs":[{"text":"Anticipation.","b":true},{"text":" In film, a character winds up before a throw, and the wind-up is what makes the throw read. In an interface, anticipation means moving "},{"text":"away","i":true},{"text":" from where the user asked you to go before going there. That is time added between the input and the answer, and the answer is what they wanted. Anticipation on a tap response is a bug."}]},{"t":"p","runs":[{"text":"Where it still works on a screen: in motion that nobody is waiting on. A logo sting can wind up. A page transition triggered by the system can. A button cannot."}]},{"t":"p","runs":[{"text":"Squash and stretch.","b":true},{"text":" Designed for bodies made of flesh, which deform. A card in an interface represents a rigid object, and stretching it reads as rubber rather than as speed. But the principle underneath (that a change of shape communicates force) survives at small amplitudes. A 2 to 4% squash on a button press is felt and not seen; a 20% squash is a cartoon."}]},{"t":"p","runs":[{"text":"The other risk is that squash and stretch applied to text makes the letterforms wrong. Scaling type non-uniformly is a typographic error that happens to be animated."}]},{"t":"p","runs":[{"text":"Exaggeration.","b":true},{"text":" The principle most damaged by the viewing contract. Exaggeration is what makes a single viewing legible and memorable. It is also what makes the four-hundredth viewing unbearable. The practical rule: the more often a motion will be seen, the closer to literal it should be. A splash screen can be exaggerated; a keyboard cannot."}]},{"t":"h2","id":"the-test-worth-applying","runs":[{"text":"The test worth applying"}]},{"t":"p","runs":[{"text":"Before shipping any interface motion, watch it twenty times in a row. Not twice: twenty. Almost every motion that is too long, too bouncy, or too clever fails this and nothing else catches it. The first viewing tells you whether it is charming. The twentieth tells you whether you can live with it."}]},{"t":"p","runs":[{"text":"For motion graphics destined to be watched once, invert the test: show it to somebody who has never seen it, once, and then ask them what it said. If they can tell you, exaggeration did its job."}]},{"t":"h2","id":"what-the-principles-do-not-cover","runs":[{"text":"What the principles do not cover"}]},{"t":"p","runs":[{"text":"They were written before screens that talk back. Nothing in the twelve addresses interruption, gesture tracking, reduced-motion preferences, or a state machine with six states and twenty transitions between them. Those are new problems, and the honest position is that the field has not settled on answers for them the way it settled on easing. Treat the twelve as a good foundation with known gaps, not as a complete theory."}]}],"check":{"question":[{"text":"Why is anticipation, which makes a character’s throw read convincingly on film, treated as a defect when applied to a button’s response to a tap?"}],"options":[{"text":[{"text":"Anticipation requires squash and stretch to read, and rigid interface elements cannot squash."}],"correct":false,"tempting":[{"text":"Bundles two separate principles; anticipation is a movement away from the target and needs no deformation at all."}]},{"text":[{"text":"It inserts movement away from the requested result before the result, adding time between the user’s input and the answer they asked for."}],"correct":true,"tempting":null},{"text":[{"text":"Interface animation durations are far too short for an anticipation move to become visible at all, so adding one is simply wasted effort on the animator’s part rather than something that harms the experience."}],"correct":false,"tempting":[{"text":"Says it is merely useless; the complaint is that it is felt as latency, which means it is visible enough to cost something."}]},{"text":[{"text":"Anticipation was designed for hand-drawn frames and does not survive interpolation between keyframes."}],"correct":false,"tempting":[{"text":"Attributes the problem to the technique rather than the viewing contract; anticipation interpolates perfectly well and is used in motion graphics."}]}],"order":[0,2,1,3],"why":null},"prev":{"slug":"arcs-and-follow-through","title":"Straight lines and the things that lag behind","minutes":9},"next":{"slug":"where-the-eye-is","title":"Where the eye already is","minutes":8}}}