A beginner's guide to designing interface animations

[Rss Bot 1]

Motion design is a necessary skill for the modern web. With web animation thriving, everyone from UX designers to front-end developers needs an appreciation for what motion can add to their work.

The character and energy that motion brings to an app or system interface works wonderfully on the web, too. Motion is a valuable interaction design tool. These are exciting times! 

So how can we develop an eye for motion and put traditional animation principles into practice for web design?

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

Web animations are enticing to visitors

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 principles of animation 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.

Web animation timing and spacing

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!

Learn more about interactive web animation with award-winning SVG specialist Chris Gannon, at Generate London

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

At the other extreme, linear easing appears mechanical and lacks life. Linear motion holds a constant speed across the entire duration of the motion so 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 in web animation

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 complements, 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 some elements that move together. Those are prime candidates for secondary action.

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

Follow through and overlapping action online

Follow through and overlapping action are two 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.

Next page: Putting animation principles into web design

Putting animation principles into web design

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.

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.

Our starting point is 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.

Set the timing of your web animation

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

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:

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. In our example of how it looks now it's still too slow, but we'll address that at the end.

Add secondary action to your web animation

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:

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:

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

Add some overlap to the animation

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:

All three elements are assigned that animation with varying delays:

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.

Add final touches and speed the whole thing up

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.

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.

Want to know more about web animation? Award-winning SVG specialist Chris Gannon will talk about interactive web animation at Generate London on 21/22 September, while Aaron Gustafson will explore adaptive interfaces and demonstrate how they smartly morph to meet their users’ needs. The two-day/one-track conference will also cover conversational interfaces, web performance, accessibility, building interfaces for the next billion and much more. If you want to stay ahead of the game with advice from the industry's best, reserve your spot today!

This article was originally published in net magazine. 

Related articles:

• Understand the 12 principles of animation
• 10 golden rules for responsive SVGs
• Happy 30th birthday GIF!

View the full article