Animations and Transitions

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.

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.