A closer look at iPhone transition animations

November 19th, 2009
New iPad puzzle game:
Art Scrambles


iphone_titlebar_animation_1_small.jpg

iPhone transition animations are cooler than meets the eye.

Take page transitions, for example. It’s common to navigate from one page to another by tapping an item from a list to see more detail: new pages slide in from the right, while tapping Back slides the old page back in from the left.

You might think that animating in a new page to replace the old would simply slide the two in lock-step, like two cafeteria trays on a serving rail, but it’s more subtle than that. To see that subtlety, let’s slow things down for a closer look.

The pages featured here are from Malt Whisky, my new iPhone app, but the animations are the same throughout iPhone. In this example, we’re transitioning from the Bunnahabhain Distillery page to the pronunciation page to hear boo·na·HAA·ven pronounced.

These 13 frames shown at right (links to larger version) reveal five different animations for five different page elements:

• The Bunnahabhain Distilleries button slides off to the left (red line) while fading to transparency.

• The Bunnahabhain page title slides off to the left (red line) while fading to transparency, mostly in sync with the Distilleries button, but notice how in frame 7 it begins to lag behind the button until by frame 11, when both finally fade completely, the distance between the two has almost doubled.

• The Pronunciation Arrow button, the Back button that when tapped will return you to the Distilleries page, simply fades into view in place. Unlike the other elements, it doesn’t move at all.

• The Pronunciation page title slides in from the right (yellow line) while fading from transparent to opaque. Notice how quickly it slides in initially, then how quickly it slows.

• Finally, the page content, everything below the navigation bar, animates in with an ease-in-ease-out slide (orange line) rather than a simple linear slide.

Interested, I rigged up a similar page transition but with a single animation of “new page pushing out old page”, including the navigation bar. The difference was profound: instead of something that felt alive and vibrant, it felt like a Keynote slide transition. A completely different feeling.

The different timing of all five animations coordinate to make the page transition whoosh. You can barely notice the animations individually and as for perceiving them all in combination, forget it. But you’re not supposed to notice them. You’re simply supposed to get a tiny thrill of seeing one page whoosh in to replace the other, of using a device that somehow seems alive.

And you do.