Principles of UI Animation

16:09FreeDone
2

Revealing List Elements

5:14FreeDone
3

Working With Lines

8:39FreeDone
4

Custom Transition Masks

6:26ProsDone
5

Animate With Expressions

6:43ProsDone
6

Switching UI States

5:44ProsDone
7

Exporting for Sharing

4:56ProsDone

Principles of UI Animation

Published by Chris Slowik

Episode Notes

Extra tips from the author

UI Animation Principles

Overlap

Probably the simplest of our UI Animation Principles, but the effect is huge. When possible, avoid sequencing animations or actions one after the other. Instead, overlap the timing of them such that there's no dead time between. Eased animations (more on these later) offer a lot of room for overlap. Overlapping animations really increase the fluidity and smoothness of your work.

Delay

This is another simple concept, but it's so effective. Sometimes the motion of an animation obscures an object or takes emphasis away from a certain element that stands out in the stills. A really easy way to bring user focus back to your intended target is to delay the animation of that object. Naturally, the user's eye will be drawn to the last item animated. It's so easy to implement, and a huge performance booster for those things you want the user to focus on!

Offset

A not-so-distant cousin of delay, offset could really be described as a bunch of delays.. each delayed from the last. Offset is awesome for bringing in multiples of something, and that's probably the most common use of it. The idea is that each item animates slightly slower or delayed in time from the previous item, which creates a staggered animation. You have to be careful with offset because the more items you have, the longer your animation becomes. For many items, keep offsets very small. Each individual effect might not be as noticeable but the whole thing comes together in a really nice way.

Ease

Easing is the single biggest factor in making an animation look smooth, natural, and premium. Put simply, easing is a gradual acceleration or deceleration of a changing value. It's most obvious to see on one of the PSR (position/scale/rotation) values, but easing can be used on any animated value. For example, although it's a bit harder to see, you could ease an opacity change. By default, keyframes in After Effects have no easing applied - the rate of change is linear. To add easing, simply highlight the keyframes you'd like to ease, and hit F9. This will set up a default "Easy Ease" on the keyframes. From there, you can go into the graph editor and fine tune the curves.

Scripts and plugins abound for tweaking easing or applying it to keyframes. My personal favorite is called Ease and Wizz. This script allows you to quickly add a variety of easing types to keyframes, including one-click setup of bounce and overshoot types. It's awesome, and a real time-saver. AE work is full of repetitive actions, so anything you can find to reduce clicks and streamline workflow is a plus.

Overshoot

I mentioned overshoot in the previous paragraph, because it could be considered another easing type. What overshoot means is literally overshooting your animation target intentionally for effect. It's used often on scale or position keyframes. Where a gradual ease out can look nice and smooth, overshoot feels a lot more energetic, almost playful or insistent. The more you use both of these, the more you'll get a feel for what to use to convey a certain feeling.

Track

User interaction is something that traditional animators don't have to keep in mind. For UI designers though, tying behaviors to user actions is a big part of what we do. Usually these behaviors trigger animations which of course are built with all the other principles in mind. Sometimes though, these animations actually track the user's finger. Sliders, draggable objects, and scrolling views are all examples of Tracking. Combining tracking with offset can create some interesting effects!

Loop

Some animations are just so interesting you don't want them to end. Or maybe there's another reason, like indicating an active state or that something is happening. In our example, we're looping an animation to indicate that music is playing. A loop could just go forever, or have a decay built in so that it ends after a certain number of loops or amount of time. An easy way to do this decay is to loop one attribute while animating another. For example, you could loop rotation while fading out opacity.

Transform

Changing an element from one thing to another is an awesome thing we can do in the digital world that doesn't work on paper! It's really rewarding as a user seeing a button expand into another element, or an item shrink and pop into your cart. There are so many different ways you could transform things, your imagination is the only limit. It's generally pretty easy to keep the same shape and change dimensions, but even that looks really cool. Apple uses this a lot. In macOS, the genie effect when you minimize windows is an extreme example. Your UI window gets stretched and tweaked into the dock icon. Even on iOS, app opening is animated with a scale transform. Google floating action buttons often become larger elements when tapped.

Helpful Scripts and Plugins

Rift - Keyframe/layer shifter

Ease and Wizz - Easing wizard

Episode Topics: