Animation Handbook
01

Motion’s purpose

The impact of animation


by Ryan McLeod

While the standard flavors of salty, sweet, sour, and bitter are obvious to us and easy to experience, the fifth flavor—umami—is ineffable. It’s the salience of parmesan cheese, anchovies, dried tomatoes, fish sauce, and dashi. Though it can be oversaturated and overused, umami is an essential taste modifier that makes the sum of its parts stronger when it’s properly used.

Animation plays a role similar to umami to elevate good design to a more satisfying experience. Over the years, we’ve built small affordances into our interfaces with animation and motion. Whether the familiar blinking I-beam cursor of our text editors, or the simple disapproving shake of a bad password, motion is an essential—yet largely unexamined—bridge between our physical and virtual worlds. Although motion is an obvious component of telling stories on film, in games, and in our software, we’ve only recently begun to elevate animation to a first-class design ingredient in consumer software.

The greatest value animation adds to software is context. Animation takes something with no moving parts and adds the appearance of visible change. These noticeable changes provide us with tangible and familiar context, which makes our software more intuitive, discoverable, emotive, and recognizable.

The rediscovery of motion

A number of forces propelled interface animation to where it is today. Commercial animation tools like Flash introduced expressive and limitless animation experimentation, but eventually lost favor as new technologies like CSS animation delivered similar functionality without the dependence on a plugin. And no force influenced modern interface motion and animation more than the iPhone.

The iPhone took the concept of making a virtual world feel physical to a new level. No longer were we indirectly prodding elements from afar with tools like a mouse; we were touching them. Unlocking the phone was not unlike sliding a chain lock; the glimmer on the text of the lock invited our attention and directed our swiping.

As an app closed, it shrunk to its resting place and taught us where to find it next time. The momentum of iOS scrolling mimicked the friction and physics of physical objects making it feel both familiar and efficient. Pinching and stretching an album was all that was needed to fan out hundreds of photos onto a tiny virtual surface.

This was a significant step in creating a natural user interface, which makes complex software interactions so intuitive that they almost become invisible. The fluid movement of objects in the real world began to make their way into software as a core design component.

Motion communicates change and context

We’re wired to see and learn from motion. A simple flipbook of frames fools us into seeing a cohesive and continuous story of motion, an innate human ability that opened the door to animated film, television, and all forms of cross-reality. While video games and movies embraced motion to share vivid and incredible stories, digital products have taken a more timid approach. However, adopting more considered and consistent animation experiences will make software a more comfortable extension of the human mind.

To make software feel familiar, it should behave like the real world. Most natural forces demonstrate observable motion. Those few natural forces that happen instantaneously—like lightning—are harder to process, to the point that we describe them as supernatural. Like lightning, computers operate at speeds so fast that elements appear and disappear on screen instantly, with no inherent need to slow down to human-perceptible speed. If we were to show a person from the early twentieth century a computer in action they would, no doubt, be mystified by the sudden appearance of shapes and text on screen because it defies perceptions of how the physical world works. Consciously or not, our modern minds have adapted to these unnatural gaps in context.

By closing these gaps, we make software less esoteric and more natural to use, with fewer of the subversive mental gymnastics that tend to exclude and frustrate users. Simple acts—like darkening a button when it’s pressed or tapping an image to expand and fill the screen while everything else fades and shrinks away—tell us changes are afoot. Though there’s no functional need to animate an application window shrinking into its resting place, such visible motion gives us time to observe the change while also providing a sense of space and where things reside.

Animation gives the brain clues and context to build a necessary bridge between the real and virtual worlds. By filling contextual gaps in an interface’s storytelling, we can make our virtual world more human, graspable, delightful, and empowering to all.

Motion catches the eye

We’re often presented with terms and conditions, newsletter signup forms, and other such text and dialog as we interact with digital content, which we reflexively close or dismiss. We must assume that anyone using our software is ignoring large swaths of it.

Motion has an evolutionary command of our attention that shows what we’re telling to greater effect than static text boxes. For instance, through immersive animation, rather than a lengthy list of rules, video games require little explanation to get someone on the road to mastery. Animation is more than look and feel; it’s a way to seamlessly integrate nuance and context better than most words could.

A typical podcast app has you tap a button to download an episode, perhaps indicating via a bounce or a notification banner when the episode is ready to play. This use of motion tells us when the episode is downloaded, but doesn’t make clear where to find it when it’s downloaded. A better download alternative might illustrate exactly what’s happening, perhaps by animating an icon of the episode itself moving from the download button to an inbox. Motion eliminates the burden of filling in the gaps between action and result. It teaches the relationship between parts of the interface and building familiarity with the layout.

Of course, every rule has exceptions. We shouldn’t replace all text with motion or iconography—some warnings or explicit statements are clearer as text. More critically, nothing should diminish the accessibility of the user experience. Ensure that for any change you communicate visually you also provide appropriate accessibility descriptions and announcements for those who rely on assistive technology.

Good animation serves an underlying purpose that makes it obvious, felt, and nearly invisible all at once. Look for opportunities to visually explain cause and effect. By replacing telling with showing as much as possible, we ensure that every animation serves a meaningful purpose.

Motion captures emotion

Animation does more than build context and support wayfinding. Animation provides a universal language to imbue emotion, augment feeling, and explain hard concepts. Like in all design, we can instill emotional qualities in our animations that make them feel a certain way—exuberant, tranquil, sharp, or playful.

A dating app like Tinder chooses springier, playful animations, while an exacting synthesizer like AudioKit Synth One keeps its animations fast and tight. A buttoned-up social media app suddenly releases an explosion of animation around an event, like favoriting a photo, as a way to signify the emotion of a compliment in a way words cannot. Both overt and subtle animations play an important and assistive role in building the memorability and trust of a brand experience.

Animation need not only be an accent, though. Animation can stand on its own to help convey hard emotions and concepts where words falter. Headspace leverages animation to bypass stigmas and stereotypes when explaining concepts like meditation and managing anxiety. Animation is just relatable enough—but not too real—that it makes a perfect bridge to unfamiliar concepts.

Tyler Hoene, Christine Cha and William Fowler discuss how animation influences the way that Headspace educates its users.

Even utilities like MailChimp use animation to help assuage the nerve-wracking act of hitting the send button. No matter how many times you check for typos, hitting send on a newsletter to five or 50,000 people is going to come with a moment of hesitation. An animation of a sympathetically sweating and shaking hand about to press the send button alongside you conveys, “It’s ok to feel stressed right now!” The animated high-five that appears after sending is a nice bit of reassurance.

Figure 4. Mailchimp uses animation to assuage the nerve-wracking act of hitting the send button. The animated high-five that appears after sending provides a bit of reassurance while celebrating the completion of a big task.

Motion invites discovery

The use of expressive animation in an interface invites play, which leads to experimentation and a deeper understanding of what’s possible. Think about the “pull to refresh” action we see in interfaces everywhere. As we swipe down, we glimpse something just out of view—a hint that ensures we’ll continue our pulling motion to discover what we’re not seeing.

Motion and animation do more than just reveal hidden interactions; they provide guidance on how less obvious interactions work. For instance, on the Apple iOS lock screen, we can turn on the flashlight or launch the camera—but only if we apply just enough intentional pressure on the buttons. We learn this by not pressing the buttons hard enough at first and seeing them spring back with resistance. The buttons grow and dim in proportion to the duration of our touch, which invites us to adjust the pressure we use to “see what happens.”

The core components of your interface should always be near the surface and ready to use. However, the secondary—but useful—bits can be safely tucked away and hinted at with animation.

Motion enlivens software

Motion is powerful. It’s a vital and overlooked part of our physical world and a difficult-to-place ingredient of great interface design. It makes the sum of our design parts stronger by dissolving the barriers between thought and interface.

While animation and motion may be relatively new disciplines of software design, they’re critical to creating experiences that transform technical tools into extensions of our minds. Read on to learn the principles that turn the complex into the approachable, whether on your own or as part of a team.

Animation Handbook
02

Principles of animation

Making product magic


by Ryan McLeod

Embellishment is innate to storytelling. When we share our stories—small or large—we’re trying to make others feel as though they’ve lived through the experience. By refining and embellishing, we tell untruths that help do our stories better justice; by adding touches of over-the-top whimsy we make them more emotional and thereby memorable; by bending the physics of time and motion we bring something otherwise inanimate closer to life, where we’re better equipped to relate to and understand it. To animate something is to bring it to life.

Where animation makes stories more relatable to audiences, it also helps us understand and trust the digital “magic” around us by filling the gaps between cause and effect. Analog systems like bicycles, toasters, or washing machines have physical limitations to how they can work or predictably move. Because we innately understand these limitations, we know what to expect and gain confidence in the systems around us.

When you pedal a bike the wheels turn and you move forward; when you press the lever on a toaster the bread goes down. Even simple circuits, like those in a flashlight or washing machine, can almost be traced and understood. We understand the motion of these analog objects because they live in the physical world.

As digital systems evolved and miniaturized, the simple turned complex. The reassuring sound of gears turning or the acrid smoke of a short circuit was replaced with silent workings and failings; our machinery became more inanimate. What once moved and could be seen became small, delicate, and hidden with a layer of software atop. We built the magical disconnected levers and knobs of software to control the machinery within.

Arthur C. Clarke’s third law states that “any sufficiently advanced technology is indistinguishable from magic.” While the idea of magic is whimsical and powerful, it can be uncomfortable when it operates in the world around you outside of your control or understanding. These days, the mechanics and inner workings of most tools are invisible. While they’re built upon physical principles, the technological underpinnings that allow our phones to know who we are with invisible laser light, or hear our requests from across the house with far-field microphones, are enough removed from our understanding to essentially be magic.

In digital systems, almost all of our constraints are lifted, and nearly anything is possible. Crafting magic is well within our reach, and by following some established animation principles, we can make our magic feel more familiar and analog to others. We can make the profound approachable.

Principles

Animation is a design tool we can use to lend physicality and tangibility to our abstract digital creations by making them feel more analog and familiar. There are a handful of established animation principles to keep in mind when telling stories—even the tiny, causal stories we see in digital gestures and interactions.

While animation has found a new home in digital interfaces, its classical history is rooted in film and entertainment. The veritable masters were at Walt Disney, where Frank Thomas and Ollie Johnston’s book, Disney Animation: The Illusion of Life, established 12 famous principles of animation. While film animation isn’t exactly the same as digital interface animation, we can look to, learn from, and rely on film animation’s established terminology and principles.

In this chapter, we’ll go into detail on seven key animation principles that inform interface design:

  1. Timing: the control over when and how long elements animate
  2. Pacing: the rate of speed at which elements animate
  3. Staging: the motion that precedes and informs larger change
  4. Follow-through: the demonstration of life-like aftermath of an animation
  5. Secondary action: the subtle background animations that enhance an overall scene
  6. Overlapping action: the animation that takes place alongside, and implies a connection to, the primary motion
  7. Appeal: the imbuing of characters with larger-than-life features or dramatic proportions

Timing and pacing

Just as timing can make or break a good joke, it can also cause us to see correlations where none exist, like a coincidence that feels supernatural. Timing can cause us to see life where there is none, and—more importantly—establishes mood and personality.

In the analog world, transitions tend to have tell-tale, in-between states that communicate more about how things work than merely observing the end states. Handles turn when doors open, text is erased before it’s rewritten, and kettles whistle louder as they get hotter. We’re wired to pick up on and react to these kinds of changes.

Digital data changes at a rate imperceptible to humans. Even when we display changing data on screens, like the number of footsteps taken or amount of screen time, the transition between states is sub-perceptual. However, it only takes a hundred or so milliseconds of movement to make a change perceptual to the human eye.

These middle states, where objects might move, fade, or flash, are technically unnecessary—after all, the underlying data could have changed multiple times in the blink of an eye. But these transitions are a necessary bit of falseness that makes the digital world’s magic more familiar and comprehensible. By introducing animation to our state changes, we make digital experiences more accessible to humans.

The simplest way to humanize state changes is to lengthen them just enough to be perceptual. In animation, time is our greatest tool. How we sculpt time can completely change the perception of an interface’s speed, properties, or even mood. State transitions, like a new view appearing, an item loading, or something being scrolled through, all warrant different uses of timing.

The frame is the fundamental unit of animation, with each frame offering a snapshot of a scene. Differences between frames blend together to build the illusion of movement and motion. In traditional animation, timing is usually measured by how many more frames are used at the beginning or end of a motion; the more frames used, the slower something appears to move, and vice versa. In digital animation, we rely on timing functions that mathematically define how an object accelerates, eases, or even bounces through a state change.

The simplest function is linear, meaning an object in motion will advance forward a uniform amount for each unit of time. This basic timing of motion is perceptual, but something about it is off (perhaps because this sort of uniform movement is physically impossible, at least according to Isaac Newton). For an object’s physicality to be believable, we need to feel the force that gets it started and the force that stops it. In other words, we should see acceleration.

To predictably recreate this acceleration in digital interfaces, we use easing functions to dictate where an object will be along its defined trajectory at a given time.

Easing functions have many names and types, each with different feelings and use cases. One of the best ways to experience the difference is with your hands: make a fist, and then quickly open your hand. Then do the same thing, but open your hand at one intentional speed. Even though the gesture takes about the same amount of time, the rate at which you move changes the feeling and meaning.

Always experiment until you find the right fit for your needs, but a good rule of thumb is to ease-out objects that are entering or gaining attention, and ease-in objects that are leaving and losing attention. When mimicking real life, or analogs—whether it’s a person, a behavior, or an object—it helps to imagine how they function.

Staging

Animations can be light or nearly invisible and still improve usability by preparing the viewer for change. For instance, if subtitles change suddenly while the viewer’s eye is on the action, it can be easy to miss the change. A brief period of nothingness in between subtitle changes stages the change to come and prepares the viewer’s attention. Small bits of staging like this help prepare the viewer by giving them time and directing their focus to what’s about to happen.

Number counters in interfaces offer another example of staging. When the numbers change, they may jump or drop. The display is accurate whether we simply change the number or introduce a small pulse or flash before the change. However, this can leave the viewer bewildered and wondering what the value was prior to the change. If we add some motion and directionality—the kind we see in the real world on a train station flipboard or handheld click-counter—we can imply the change to the viewer faster and with less mental burden.

Follow-through

Simple easing functions provide enough realism when animating colors and opacities, but they often feel stale when they’re used to animate motion. Only factory robots come to perfectly calculated rest after decelerating. Our world is filled with soft and imprecise movements, like when we reach to grasp something, or pull a paper towel off a roll. Allowing objects to slightly overshoot their final resting place with a bit of spring makes even futuristic interfaces feel more real. By adding even a modicum of this springiness to eased animations, we give motion a sub-perceptual air of life, and objects a sense of weight and friction they otherwise lack.

This slight springiness can be achieved through timing functions, too, by overshooting the final value before dipping below it and returning, like a putted golf ball rolling beyond, around, and finally into the hole. Note that springs and springiness don’t necessarily belong everywhere, and should generally be on the verge of being perceived.

If animation is the body language of your digital creation, then secondary motions are the micro-expressions that help us tell the difference between a genuine and reluctant expression.

Secondary action

Though you might have a favorite dish, it’s the combination of many different flavors and aromas—including some you might not even realize—that makes it memorable. The song stuck in your head is just the right balance of notes and harmonies—some heard, some disappearing into the background.

Similarly, it’s often secondary action that makes an animation indescribably great. In classical animation, secondary actions might be the crossing of a character’s arms as she leans against a wall, or the smoke rising out of a malfunctioning computer. In these examples the addition of the secondary actions can spell the difference between tired and coy, buggy, or sabotaged. If animation is the body language of your digital creation, then secondary motions are the micro-expressions that help us tell the difference between a genuine and reluctant expression.

These subtle flourishes can tint an entire ensemble of motion to appear more exuberant, joyous, or sober. Secondary animation also informs us when a gesture has been dragged so far it cancels itself or becomes a destructive action. When implemented with restraint, secondary animation is a powerful tool for making interactions deeply satisfying, communicative, and human.

The best use of secondary motion never takes attention from the primary motion, it only bolsters it. Secondary action helps establish nuance and hierarchy the same way color, typography, and layout do for text. While it might not be noticed by untrained eyes, when used sparingly as punctuation and garnish, it will always be felt.

Overlapping action

In traditional animation, an overlapping action is a motion happening alongside the primary motion, but offset in such a way that it implies a loose connection. For instance, imagine a basset hound running with its large ears dropping as it jumps and flying as it lands. These movements largely follow the motion of the hound’s body, but are offset in such a way that they appear more like appendages catching up to the hound’s actions.

One common example of offsetting in digital interfaces is a collection of distinct elements which all animate in the exact same way. Offsetting their animation start time so that they subtly cascade implies a logical connection between the elements, like pulling on a chain of links, as opposed to rigidly moving them in together like cookies on a baking sheet. Offsetting has an added benefit of breaking up the heaviness of a transition while indicating that each element is distinct and interactive.

Note that offsetting the animation of multiple similar elements can increase fatigue for the viewer by splitting what was one motion to track into many. It’s important that animations like this be subtle instead of gratuitous, and grouped tightly whether there are one or 20 of them. Always keep edge cases in mind while building these interactions. An incrementing offset that works for the start of three elements might appear heavy and sluggish for 12.

Appeal

Not every aspect of animation must be purely functional or grounded in reality. In classical animation, appeal is the principle of imbuing characters with larger-than-life features, like youthful eyes, pronounced jaws, or other dramatic proportions. It’s unintuitive, but sometimes by making something brighter and bolder than it really is, we make it more human and relatable.

William Fowler and Vicki Tan discuss the brand and business implications of animation for Headspace.

Appeal serves as the animated equivalent of branding. The often understated yet familiar click of a cartridge, feel of a knob, or rumble of an engine in the real world has become the small explosion of color when we like something a friend has shared, or the familiar snap and bounce in a gestural interface. Appeal via animation is an often overlooked way to differentiate your work and give it the qualities that make it memorable and familiar.

Principles in practice

Because we’re used to seeing the causality of the world around us, it can be unsettling when we can’t observe how something works. The digital interfaces and tools we work with today benefit from the human affordances, like animation, that tell the missing story.

The next chapter demonstrates how to put the animation principles you just learned into the context of a project workflow. However, no matter the project, by using tried-and-true animation principles, looking to nature’s analogs, and studying the techniques of our favorite interfaces, we’ll gain the skills to animate the lifeless.

About the Authors

Ryan McLeod
Blackbox

Ryan McLeod is a puzzle maker and self-taught designer with a masters in Computer Science. He designs and develops the infamous and infuriating game Blackbox, which won an Apple Design Award in 2017. In addition to being a game, Blackbox has also become a testbed for interaction design and accessibility innovation. Off the computer, he cooks a lot and once accidentally bartended the Nobel Prize after-party.

  • Currently listening to: The XX and RÜFÜS DU SOL when I’m writing. I rock DJ sets like Nora En Pure‘s when I’m coding.
  • Inspired by: Brett Victor, who likes to blow holes in immutable things like mathematics. He’s great at questioning these subjects but also offering ways in which we might improve with things like new interfaces for learning and teaching math.
  • Cultural thing I’m lovin’: Amsterdam is removing traffic lights. The result is less traffic traffic/delays and sees no increase in accidents. Makes me wonder what other situations can be improved by similar patterns of thought.