The Canon

Any good sci-fi universe has what’s called a canon, a set of fundamental laws and principles the world lives by. In the world of animation, a canon was created when Ollie Johnston and Frank Thomas defined the 12 principles of animation in their 1981 book Disney Animation: The Illusion of Life.

Earlier this year, Glen Keane, one of the greatest Disney animators, and Rebecca Ussai, designer at R/GA, delivered a great talk called UX Choreography, a first attempt to redefine the 12 original principles as five laws of UI animation. I think their framework is great, but mostly covers functional animation and less so the “material” and “delightful” aspects. In my opinion, the original 12 are so good that they all apply to UI animation. I’ll try to re-order and regroup them to follow the same basic ingredients: blue for material, green for functional, and orange for delightful. Let’s see how these principles apply to UI/UX animation individually and also in relationship to each other.

The first group of principles covers the material properties of your UI, and therefore, the animation. I’d recommend applying Material principles before Functional because they have to deal with the information architecture and the material model of your UI.

Solid drawing is a basic material principle. It’s about honoring the rules of three-dimensional space and giving objects and characters appropriate dimensionality via volume and weight. Solid drawing requires animators to understand the basics of three-dimensional shapes: anatomy, weight, balance, light, and shadow. Disney animators wanted to make cartoons look real so that people would better relate to them. What they used to call solid drawing, today, we’ve started calling material design.

There are two way to draw motion: dynamic frame-by-frame (Straight ahead) or more linear Pose-to-Pose. Animators use different techniques depending on the complexity and the dynamics of current transition. The way it relates to our world is how you’re going to implement animation in CSS, XCode, or any other programming language. If animation is simple, you can use a single parameter, like object position or scale, set two keyframes (or poses) and create a relatively linear transition. And if the animation is meant to be unique, captivating, and stand out, you need to carefully draw the motion straight ahead, with lots of parameters involved, often frame-by-frame.

Squash and stretch help describe the mass and rigidity of animated objects and define the properties of material they’re made of. As a designer you should decide if your UI is a world of solid planes, rigid surfaces, and sharp, exact movements; or if it’s more organic, with softer, pliable surfaces and fluid movements. This is part of your motion brand: what’s the style and the look-and-feel of your animation?

Notice that arcs could be applied to the z-axis as well — this is especially helpful when building a multi-layered material animation.

Similarly, arcs also help define the motion’s nature. Mechanical things such as cars, bicycles, and trains tend to move along straight trajectories, whereas organic objects such as plants, animals, and, well…us, tend to move along arced trajectories. So ask yourself, is your UI robotic or humane? This principle, along with Squash and Stretch and Straight-Ahead techniques allow you to create more authentic, organic, and memorable motion.

Staging is about emphasizing the central idea of an animation, making it completely clear to the viewer. A well-staged animated transition directs the user’s eye to exactly where it needs to be as they interact with the experience — to an important bit of content or suggested interaction. Most UIs lack a strong conceptual anchor, and as a result, users who are new to it often feel confused as they navigate through screens. But even if you don’t have a UI anchor, you can stage your motion in a way that helps users pay attention to what’s important.

Imagine you’re editing an action scene in a movie; say, the duel between Luke and Darth Vader. Define the overall tempo of your action scene first: is it fast or slow? Then, prioritize individual motions: the most spectacular or important motions (like chopping a hand with a lightsaber) should last longer while secondary motions should be shorter and overlap.

Timing is probably the most important principle of all. No matter what you’re animating, users’ perception and comprehension will be defined by the way you build sequence, what you make your primary or secondary motion, what you Ease In or Out.

Composing animation–just like movie editing–requires finesse and practice. The key to truly mastering timing is cubic bezier (or the velocity curve). After Effects plug-ins and generic code libraries offer “basic” curves like Ease In or Ease Out. If you want to start hand-sculpting your motion curves, there’s going to be a lot of trial and error, a lot of snapping fingers in an attempt to catch the right rhythm. Have fun, this is exactly what good movie directors and editors do.

The Follow-through and Overlapping principle is about orchestrating several simultaneous motions. Things around us don’t move in perfect unison, some motions are more noticeable than the others: setting the tone like the movie’s stars and others are subtle and passive, following the lead.

Follow-through is about making the parts of the big animated object (e.g., a UI panel or card) follow the motion of their “parent” in an organic and realistic way. Overlapping makes sure all of that happens simultaneously. Follow-through helps communicate the hierarchy between UI elements and set priorities in your motion symphony, while Overlapping keeps the entire sequence seamless and within measure.

The Secondary Action principle is very similar to Follow-through and Overlapping. This is the bread and butter of a magician’s sleight of hand and manipulating change blindness. It helps you define what should be put in front of the user and what should stay hidden. Pick what’s most important to a user’s comprehension to be the primary motion, emphasize it and make it your movie star while overlapping it with secondary motions. Rule of thumb: secondary actions should never detract attention from the primary ones.

Ease In/Out is one of the most fundamental tools to drive users’ attention and make motion look authentic at the same time. This principle, along with Timing and Overlapping, helps users follow your animated story by creating a comprehension hierarchy.

On the material side, Ease helps convey the laws of inertia — things don’t stop abruptly and don’t instantly speed up in real life. Allowing the laws of physics to exist in your digital world makes experience more relatable to users. On the functional side, people tend to pay closer attention to objects that slow down and defocus on the accelerating objects. The rule of thumb is to Ease Out objects that you want people to pay attention to (especially new UI elements coming into the scene), while letting the unimportant objects leave the scene at a top velocity.

Anticipation is a really powerful principle that can be used both in the beginning and end of your animation. First, it’s helpful in preparing an object for movement, orchestrating the components of a scene — lighting, composition, or even the form of an object — in order to give the viewer a clue as to what’s about to happen. One of the easiest ways to create anticipation is Easing In. Slow down the beginning of important animation and people will pay attention to it in anticipation of something happening. A second way to use Anticipation (or Feedforward, as redefined Rebecca and Glen) is at the end of your animated transition, by providing visual affordance for suggested interactions or gestures. Hey, I’m an off-canvas menu, swipe me!

Exaggeration draws most attention, and therefore works best with primary motion.

Exaggeration makes movement feel dynamic, alive, and just plain fun. An animation without some level of exaggeration might look accurate, but will likely feel stiff, mechanical, and boring.

Disney’s classic definition of exaggeration is to remain true to reality but to present a wilder form. As suggested by Rebecca and Glen, you can start with exaggerating the Feedback from your UI — make your buttons, knobs, and panels respond to users’ interaction in a delightful and noticeable way. But you don’t have to stop at Feedback — feel free to exaggerate anything you want; just make sure that your functional UX goals are met first.

Appeal is the last and most mysterious of all Disney’s principles. Think about all of the apps and websites you use day-to-day and why you keep using them. Often, there are many others that can solve same tasks, but the ones that people stick to do much more. They surprise and delight you; they enable you to achieve bigger goals. They have more than just a good user experience; they have emotional appeal.

In UI/UX animation, the Appeal principle means staying true and consistent to the motion design style and feeling it conveys. In terms of movies, Appeal is the your unique style as director, what makes people remember your movies, like Wes Anderson’s symmetry or JJ Abrams’ flare.

Conclusion

If you take away just one line, let it be this: functional, material and delightful.

Functional: Make sure your animation solves the user’s need first

Make sure your animation solves the user’s need first Material: Design consistent UI layers that allow spatially meaningful transitions

Design consistent UI layers that allow spatially meaningful transitions Delightful: Give your animation some love, and your user will love your product back!

These and many more animation examples are available in my Dribbble buckets. Tweet me at @fiorine, I’d love to chat.

Animation credits: superwhite, Eddie Lobanovskiy, Isil Uzum, Rebecca Ussai, Anish Chandran, Jason Teunissen, Łukasz Frankiewicz, Sergey Valiukh, Konstantine Trundayev, Jelio Dimitrov, Ramotion, Jakub Antalik, Pavel Proshin, Kreativa Studio, Justin Ruckman, Nikita NIKI, xjw, Zee Young.

And a shoutout to Ryan Roehl (@ryanroehls) who helped me put my thoughts in order.