A widely used set of twelve animation principles, formalised by veteran studio animators in the twentieth century, was originally developed to solve a specific problem in hand-drawn character animation: how to make a sequence of static drawings feel like it's obeying real, believable physics when played back in motion, rather than looking mechanical or lifeless. Decades later, the same twelve principles still shape how motion designers animate a button, an icon or a loading indicator on a modern screen, even though the underlying medium has moved from hand-drawn cels to code-driven digital interfaces.
Two principles do an outsized share of the actual work
Among the twelve, two principles are particularly foundational to making motion feel physically convincing. Squash and stretch describes deforming an object's shape slightly as it moves or collides, the way a bouncing ball flattens slightly on impact and stretches slightly as it accelerates, which communicates a sense of weight, flexibility and physical impact that a perfectly rigid, undeforming shape simply can't convey on its own. Timing and spacing describes how the number of frames, and the specific spacing between individual positions within them, determines an object's perceived speed and weight — objects placed close together frame to frame read as moving slowly, while objects spaced further apart frame to frame read as moving quickly, and getting this relationship right is central to making any animated motion feel like it's obeying real, consistent physical rules rather than moving arbitrarily.
The same principles now shape how interfaces feel responsive, not lifelike
When these originally hand-drawn-animation-focused principles are applied to a modern user interface, the underlying goal shifts somewhat, from making a character feel alive to making an interface feel responsive and physically coherent — a button that slightly compresses when pressed is applying squash and stretch, and a menu that eases in gradually rather than snapping instantly into place is applying timing and spacing, both borrowed fairly directly from the original character-animation principles even though the modern context, a piece of interface rather than a drawn character, is quite different from what the principles were originally developed for. This continuity is a large part of why motion design education still commonly references the original twelve principles directly, treating them as a genuinely durable foundation that transfers well to a very different visual medium, rather than as historical curiosities specific only to the hand-drawn character animation they were originally developed to solve.
What we're still unsure about
The twelve principles themselves, their original development for hand-drawn character animation, and their continued widespread use in modern motion design education are all well documented in animation and design history. What's more a matter of ongoing design judgement than settled fact is exactly how directly and how much of each specific principle should transfer to interface animation, given how different the underlying goals genuinely are — making a cartoon character feel alive and making a loading spinner feel unobtrusive and efficient aren't quite the same design problem, and motion designers continue to debate, and experiment with, exactly how much weight, squash or elaborate timing an interface element actually needs before it starts feeling excessive or distracting rather than genuinely helpful.
This sits inside Motion Design & Animation Principles, one of seven topics in Design, one of five domains in Art, one of seventeen subjects the app can quiz you on.