Back to Design Then Code Buy The Book
This is a sample from Motion Design for iOS, a new iOS animation design & development book from Design Then Code. Written by Mike Rundle Sample 1 Sample 2 Sample 3 Sample 4 Sample 5

Transition, Focus & Delight

I’ve been thinking about, designing and building animations for iOS apps since the SDK was first announced. After all this time, and all these apps, I’ve realized that there are 3 key reasons why I’ll typically imagine, design and build an animation for an iOS app (or actually any digital product for that matter):

  1. Transition: To accentuate a smooth movement between two visual states so that the user can become acclimated to the new screen and not just shoved into it. A smooth transition like this eases the mental burden of an unfamiliar interface.
  2. Focus: To direct the user’s attention to a particular part of the interface that’s important or recently updated, especially an element that needs immediate user action.
  3. Delight: To make an otherwise commonplace interaction more appealing and interesting through the use of whimsy or unexpected motion.

Let’s walk through some examples of animations and dissect the reasoning for why they exist and what their purposes are using these 3 animation categories.

iOS 7 Calendar app animations, from BeyondKinetic.

Apple’s Calendar app for iOS has been totally re-imagined for iOS 7. The animation between viewing a year and a single month is a great example of a transition that guides a user between two visual states. Because the transition isn’t just a simple navigation controller push, but an animated zoom into a deeper detail level, a user really gets the sense that they are diving deeper into the data.

iOS 7.1 call screen and power off animations, from BeyondKinetic.

The call screen animations starting in iOS 7.1 have been thoroughly refined and now have a more consistent design than before. When accepting a call, the green Accept button now rotates and transitions to a red color so it can become the hang up button. A similar transition happens after you tap the green call button when initiating a call. The lock screen power off slider is much more understandable now and all parts of the screen (except the power off button you’re sliding) fades out to indicate what the next state of the interface will be if you continue sliding it — a turned off phone.

Animation by Jakub Antalík.

The interface shown above uses a build-in effect to transition from a blank state to a screen filled with information. By animating in each element separately, it forces the user to pay attention to one element at a time as it is animated onto the screen. This step-by-step type of animated build-in lets a designer fine-tune how a user’s visual focus is spent at each millisecond of usage. It’s also more visually appealing than simply displaying this screen without any animation, or by animating in the entire screen at once. A negative side-effect of this type of animation is that it takes longer to present the interface and its corresponding information to the user. This can get annoying, especially if it’s happening over and over. Animating timing and perceived slowness will be discussed later on in this guide.

Animation by Jeff Broderick.

This is a wonderful example of how an animated transition can orient the user and make them understand the larger mental model behind an app. Keeping the icon stationary while animating out the main screen and animating in the map makes the map icon seem like a visual pivot point between two central panels. When the user taps on the map icon, and the map is brought forward, the previous interface has been scaled back and is still visible. The user won’t feel like they are lost in the application when moving around and figuring out how certain features work.

We’ll be recreating Jeff’s map animation later in this guide.

Various animations from Facebook Paper, animations from CAPPTIVATE.

All transitions and newly-presented information in Facebook Paper are animated using various 2D and 3D effects. In the first panel, when the globe icon is tapped, the Notifications sheet slides out from underneath the icon giving users the impression that it’s always just tucked up underneath that globe, waiting to be displayed. Also, by eminating from the icon, it reinforces a particular mental model to the user indicating that that exact screen can always be accessed by the globe no matter where they are in the application.

In the third panel, when you slide a piece of content up from the bottom scrollview to take over the full screen, it slides on top of what’s currently presented to remind the user they can get back to where they were with just a simple flick back down. If the whole screen faded out and then the article detail view faded in, users would be left without any sense of where they were contextually within the app, so Paper’s various transitions are always used to anchor the navigational flows in a user’s mind.

Paper uses the wonderful animation framework Pop that Facebook has released as an open source project for all developers to use. We’ll be diving in deep into Pop later on.

Animation by Thomas Bogner

In this concept animation for an Apple wristband, you can see that the transition between each screen is fluid and objects move out of the way before new objects appear on the screen. Each object moves as if it’s being tugged by the previous object that was in motion. Because the display is so small, and in a landscape orientation, it’s important to build a user’s mental model of the application using motion. Here you can see that the music controls are to the left of the clock and below the music controls is the functionality to change the song. To the right of the clock are a list of apps. So even without any sort of navigational clues left on the screen (like a back button), the transitional animations give you a sense of the overall information architecture of the product and its interface.

Animation by Jakub Antalík

This is another really fun animation designed by Jakub Antalík who also created the speedometer animation shown previously. Each screen uses a variety of build-in effects to stagger the display of each visual element. The way that the song list animates in is a really delightful departure from the typical way that screens animate in using a simple iOS navigation stack push. The key difference in this animation is that the screen isn’t moving all at one time, each individual element on the screen is doing the moving. To create an effect like this, each element’s starting time needs to be slightly staggered from the previous element, like they’re all being tugged in a row.

We’ll be recreating part of Jakub’s animation later on in this guide.

Animation by Creativedash

This pull-to-refresh skull animation is an excellent example of introducing some whimsy and interest to an interface element that could easily be overlooked and built very simply (and cheaply!) without any animation, or without the complexity and style of animation present here. There are a few things happening during the pull gesture, first, the elements that make up the skull illustration are moving around to make it appear as if the skull is rotating downwards. Next, there are two animated figures that appear as it’s pulled down that were not visible in the default state of the interface. And, finally, those animated figures aren’t just simply being shown as the user pulls, but parts of those illustrations are rotating and moving during the gesture as well. This is a very complex animation with a number of different elements, but you can imagine that a user might pull the interface down over and over just because it’s so much fun to watch. It’s something that will make them remember this app over others, and that’s so important when you’re trying to stand out on a user’s homescreen.

Looking at animations and discussing why they’re great is fine and dandy but it doesn’t get us any closer to being able to break down exactly what they’re doing so we can create amazing ones ourselves. Let’s continue to the next section of this guide to learn about the mechanics and properties of animation.

Go to next sample