The twelve principles of animation, for brands and screens

The twelve principles of animation are a list of what makes drawn movement look alive. Animators at the Walt Disney studio worked them out from the 1930s onwards, and two of them, Frank Thomas and Ollie Johnston, wrote them down in The Illusion of Life: Disney Animation, published in 1981. Both men were among the studio's Nine Old Men, the core animators of its classic features. The book is still a standard reference. The principles were written for characters on a cinema screen, watched by an audience that had chosen to watch. Anybody who moves things on a screen today borrows from them, and the skill is knowing which ones travel.

Here they are in the book's order. Squash and stretch deforms a shape to show weight and impact, the way a ball flattens when it lands, while its volume stays the same. Anticipation is the small move before the big one, a crouch before a jump. Staging presents one idea at a time so the viewer knows where to look. Straight ahead action and pose to pose are two ways of drawing a move, either frame by frame from the start or key poses first with the frames between them filled in afterwards. Follow through and overlapping action let parts keep moving after the body stops, like hair or the tail of a coat. Slow in and slow out means things speed up and slow down instead of starting and stopping at full speed. Arcs say natural movement travels in curves. Secondary action adds a smaller movement that supports the main one. Timing is the number of frames a move takes, which decides how heavy or quick it feels. Exaggeration pushes movement past realism so that it reads. Solid drawing keeps forms three-dimensional, with weight and volume. Appeal is what makes a character worth watching.

About half of them transfer directly to interfaces and brand motion. Slow in and slow out is the one you will use every day, because it is what an easing curve does. Timing becomes a duration in milliseconds. Staging becomes the rule that a transition should draw the eye to the single thing that changed, rather than animating six elements at once. Anticipation and follow through are what make motion feel physical, so a panel that compresses a fraction before sliding out, or a list that settles a few pixels after arriving, reads as an object with mass. Arcs and secondary action turn up more in brand films than in product screens. Squash and stretch, exaggeration and appeal are the ones to hold back, because at interface scale they read as childish very quickly. Solid drawing and the two drawing methods belong mostly to character animators.

The big interface systems have written these ideas into rules. Google's Material Design gives developers named easing curves, a standard set and an emphasised set, each with one version for things entering the screen and another for things leaving it. It pairs them with sixteen duration steps between 50 and 1,000 milliseconds, and says that duration should grow as the area or distance of an animation grows. That is slow in and slow out, and timing, turned into tokens a developer can reach for. Apple's guidelines lean the other way. The Human Interface Guidelines tell designers not to add motion for the sake of adding motion, to make it optional, to let people cancel it, and to avoid animating interactions that happen often. Read together, the two documents give you the working position. Use the principles to make movement legible, and use as little movement as the job allows.

Brand motion can take more of them. It is met less often than an interface and watched rather than used, so it can carry more character before it wears thin. When Google redrew its identity in 2015, it added four coloured dots that animate to show the assistant listening, thinking, replying, incomprehension and confirmation. Those dots borrow squash and stretch, anticipation and appeal openly, which suits a character people talk to and would be wrong on a settings screen. Interfaces use the same principles more quietly. Apple's Genie effect, which pours a minimised window into the Dock and has been part of Mac OS X since 2001, is squash and stretch put to work, because the window distorts as it travels and you can see exactly where it went. There the stretch is carrying information.

On a real job the principles work as a checklist, one moment at a time. Take a product card that opens into a detail view in a shopping app. Timing sets the length first. A few hundred milliseconds is usually right, and slow in and slow out picks the curve, quick off the tap and settling at the end. Staging decides that the card itself grows while everything around it fades, so the eye follows one object. Follow through lets the photograph inside the card land a beat after its frame. Anticipation is usually cut here, because somebody who has just tapped a card wants the response at once, and a wind-up before it, however small, feels like the app hesitating. That is four principles in one transition, and nobody using the app could name any of them.