A beginner's guide to designing interface animations

Val Head provides a crash-course in motion design for the web.

A beginner's guide to designing interface animations

Animation is becoming a standard part of web design; learn how to make the most of it

Val Head will be discussing motion in design systems at Generate Sydney on 5 September, while Sarah Drasner will demonstrate how to make intricate SVG animations at Generate San Francisco on 15 July.

Motion design is a necessary skill for the modern web. With web animation really starting to hit its stride, everyone from UX designers to frontend developers needs an appreciation for what motion can add to their work.

Animated interactions are already commonplace in our native apps and operating systems. The web may be behind these platforms in its animation capabilities right now, but we're catching up fast thanks to the constant improvement of browsers' rendering and support of web animation options.

Soon the character and energy that motion brings to an interface will be the norm on the web too. Motion is starting to find its way into our web design process and being recognised as a valuable interaction design tool. These are exciting times!

One of my favourite sources of motion design inspiration! Art of the Title features breakdowns and case studies galore

One of my favourite sources of motion design inspiration! Art of the Title features breakdowns and case studies galore

While animation has a lot to offer in all aspects of design, I won't be going into too much detail on how animation supports UX here (I cover a few examples in this A List Apart article). This article is all about developing an eye for motion and putting traditional animation principles into practice.

Great interface animation is useful, conveys information and does it with restraint and style. That's a tall order, but it's not out of reach. Restraint and style is where motion design skills come in. Well designed motion keeps our audience focused on the quality experience instead of distracting them with awkward bells and whistles.

Classic animation principles

The bible of animation, if there were one, would be The Illusion of Life by Disney animators Ollie Johnston and Frank Thomas. This book features the 12 guidelines by which Disney imitated life in its animated films.

These principles are time-tested and even though they're written for an entirely different medium, we can apply them to animated interactions with great results. Learning to identify each of these principles will help you develop an eye for animation and give you a basis for evaluating and designing interactions. The 12 classic principles are: squash and stretch, anticipation, staging, straight ahead and pose to pose, follow through, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing and appeal.

They don't all apply equally to our efforts in interface animation, but it's still helpful to know what each entails. We'll take a closer look at the three principles that are particularly key to interface animations: timing, secondary action and follow through.

Timing and spacing: It really is everything

The bouncy motion of the dots in Dots conveys an energetic playfulness and creates momentum

The bouncy motion of the dots in Dots conveys an energetic playfulness and creates momentum

My improv teacher always tells us that timing is the key to comedy. As it happens, timing is also the key to animation. In animation, timing is all about how long an action takes.

In the classic text, it's said that correct timing makes an object appear to obey the laws of physics. It gives cues as to the weight of an object and which forces have acted upon it. When it comes to interface animation, our goal isn't always to replicate the physical world, though. We tend to focus on the aspect of timing that establishes an object's 'personality'. So much can be communicated through timing!

Generate San Francisco - Val Head

Learn how to make web animation work for you and your team at Generate Sydney

For web animation, spacing comes down to the easing (the timing function) that we apply to an animating property. Easing determines how speed changes occur across the duration of an animation. That's how we indicate mood and personality. The duration of an animation also plays a role here, but the easing does most of the talking.

Strong bouncy timing, like the motion of the dots in the Dots game, conveys an energetic, playful feeling. It can often feel even a bit childish at times. Scroll down on the game's website for a short animation and look closely at the way the dots move – when they fall into place they bounce back up a little. The bounce is short, which informs us the dots have some weight to them.

The animating object moves the same distance in each frame, to give a steady speed

The animating object moves the same distance in each frame, to give a steady speed

At the other extreme, linear easing appears mechanical and lacks life. Linear motion holds a constant speed across the entire duration of the motion; there's no slowing down or speeding up at all. That's impossible in the real world, thanks to things like gravity! Linear easing communicates nothing useful about the mass or nature of the moving object.

The funny thing about timing is that despite its potential to communicate, and all the effort we might devote to choosing it, all animations have to happen quickly. One of the biggest motion design crimes out there is to make your UI animations too slow. It takes practice to get timing right, but the more you do it, the better you'll get. Prototyping animations is very effective for getting your timing down.

Secondary action: The supporting actor

 The 3D rotation part of the form-expanding animation in the Checkout flow is an example of secondary action

The 3D rotation part of the form-expanding animation in the Checkout flow is an example of secondary action

Secondary action is additional animation that compliments, or occurs as a reaction to, the primary animation. In traditional animation, this might be something like a character whistling or moving her arms around while she walks. In interfaces, it's how nearby elements move in reaction to the main motion.

Websites and apps can't whistle or move their arms, so the opportunities for secondary action aren't always as obvious. However, they do have related elements and elements that move together. Those are prime candidates for secondary action.

Twitter's like heart animation is a good example of secondary action. The main action is the heart scaling up into view. The circles and little particles that fly out around it are secondary actions that enhance the heart's effect.

Follow through: Overshooting just a little

Follow through and overlapping action are two very closely related concepts that deal with how an object comes to a stop. Follow through is the motion of overshooting the final destination by a small amount and then coming back to settle into place.

In the Slides changelog timeline, each item in the list shoots out a little further than its destination before settling back to a stop. That's follow through in action.

Similarly, overlapping action is the concept that not all parts of an object come to a stop at the same time. For example, a dog's floppy ears keep moving forward even after their body has come to a stop.

Unless you're working with some sort of physics engine, you'll be faking or approximating these concepts with easing choices or keyframe placement. There's nothing wrong with that. Hinting at these familiar concepts with any type of animation goes a long way to creating a more realistic feeling.

Putting it into practice

To start with, everything in our example moves in and animates at once, like one solid connected object

To start with, everything in our example moves in and animates at once, like one solid connected object

It's fun to read about these principles, but they're more useful when we put them into action. Let's take a stab at putting these techniques into practice with some CSS animation.

For this part, I'm assuming you have some background in CSS keyframe animation. If you need a refresher, this post by Rachel Cope will get you up to speed in no time. Our example is an animated alert box that confirms your booking at a fictitious cat café. It animates onto the screen to let us know our booking task has successfully been completed.

See our starting point here. At the moment it's a bit, well, lacking. Our alert box does the bare minimum: it animates into view, followed by the associated button, which fades in below it. There's nothing all that compelling about it ... at least not yet.

A timing check

This is the easing our example starts with, using the ease-out keyword in CSS

This is the easing our example starts with, using the ease-out keyword in CSS

Contrast this with our ease-out easing. The curve extends past the top, creating the follow through

Contrast this with our ease-out easing. The curve extends past the top, creating the follow through

Timing is always a good one to start with. Our alert box is using the ease-out timing function, so it comes in at a higher speed and then slows into place in a low-key kind of way. Not bad, but it's still a little lacklustre considering the task at hand.

This is the last step in our transaction. We've just finished our task and booked something fun and exciting (at least, if you like cats). A little more energy and excitement is in order for this situation! A change to our easing will help take care of that.

We'll keep the general feel of an ease-out, but we'll amp it up with a custom cubic Bézier function created on cubic-bezier.com. We'll have our new easing shoot out past the end point and then snap back into place.

Our new animation now reads:

animation: slideIn .85s cubic-bezier(0.175, 0.885, 0.320, 1.275) both, fadeIn 0.25s ease-in both;

With that change we've accomplished two things: We've created follow through action by having our box overshoot its destination. We've made the motion feel more energetic by using a curve with more drastic speed changes. See our example now.

It's still too slow, but we'll address that at the end.

Some secondary action

Our button is a prime candidate for some secondary action. It's related to our main alert box, and it can appear slightly afterwards. Its delayed fade-in hints at some secondary action, but we could create a more dramatic effect by having it slide out from under the body of the alert box, as if it's sliding down into place as a reaction to the alert box's upward motion.

To accomplish this, we'll add one set of keyframes for that slide down action:

@keyframes slideDown {
from {transform: translateY(-120px)}
to {transform: translateY(0)}
}

Add that animation to our button in addition to its fading in, with slight delays on both so they happen when the main motion has mostly completed:

button {
animation: slideDown .425s .55s cubic-bezier(.03,.16,.39,0.99); both, fadeIn .6s .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

It's already looking like a much more sophisticated and energetic animation!

Adding some overlap

All of the content within our alert box is moving at the same rate, like it's a flat piece of glass with the text etched onto it. This doesn't fit with our goal of creating an energetic, fun mood with the motion. Animating the text inside the box separately will create some overlapping action to give the motion more life and create the effect of energy transferring from one element to another.

To accomplish this, I'll add one more set of keyframes for a less pronounced slide in. I'll apply these to the h2, h3 and the paragraph inside the box, each with a delay. The new set of keyframes is a shortened version of our slideIn animation:

@keyframes slideInShort {
from {transform:translateY(80px);}
to {transform:translateY(0);}
}

All three elements are assigned that animation with varying delays:

animation: slideInShort 0.3s cubic-bezier(.03,.16,.39,0.99); both, fadeIn 0.15s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;

Our example is really starting to shape up now.

Sass variables to manage delays and durations

Sass can save you some headaches when it comes to adjusting related durations and delays. I like to set my related durations and delays relative to a global Sass variable – like $dur:.6s, for example – then multiply that variable as needed for related delays and durations. It's a huge time-saver.

Final touches and speeding the whole thing up

In our final version, the alert box container, text content and button animate in with complimentary motion

In our final version, the alert box container, text content and button animate in with complimentary motion

We tend to keep animations slower than they need to be while we're designing them. And for good reason: we need to see what's happening in order to make our design decisions.

It takes much less time to 'read' an animation than it does to design it, though. Our eyes and brains work very quickly when reading motion, so speeding up our animations is almost always necessary – sometimes as drastically as half the speed. Don't be shy in chopping these durations down.

To finish off our example, we'll cut down the durations and adjust the delays accordingly. Optionally, we can also add in some Sass variables for the cubic Bézier values and durations to tidy things up. See our example in its final state here.

After those few tweaks, our alert box animation is looking much more polished. All the motion involved has been aligned to the message we wanted to convey, using a few of the classic animation principles.

These techniques, along with the other eight in the list, can be applied to nearly any web animation task. The more we put them into practice, the better our motion design skills will become.

The rise of web animation

Many web design trends lists include motion as something that's on the rise. I wholeheartedly agree with anyone putting animation on their list. Browsers are getting faster and more consistent with every new web animation technology that emerges. This is a big part of why web animation is starting to really capture the attention of designers.

It's not the only reason though – I've also noticed a change in the industry's attitude towards animation. At conferences and workshops, I'm noticing that the most common questions I'm being asked are starting to change from 'Why should I bother?' to 'How can I use this well?'

We're no longer looking for ways to justify animation as a design tool. Instead, we're looking for ways to do it well. To create interface animations with purpose and style. High fives all round for that! There are a lot of talented web designers out there and I'm excited to see what the near future holds for web animation!

Words: Val Head

Val Head will be discussing motion in design systems at Generate Sydney on 5 September. Generate will also be in San Francisco and London this year; if you want to stay ahead of the game with advice from the industry's best, don't miss out!

This article was originally published in issue 265 of net magazine, and was updated by the author in November 2015.

Topics