We continue our ‘Best of 2012‘ series with our favourite UI animtions from apps that came out this year. Apps can have stunning UIs & great functionality, but having unique animations and transitions in them make you coming back to them and make the apps worthy of showing off the platform. A good animation or transition when you least expect it gives you that feeling of delight and often makes you fall in love with it. 2012 has seen many popular apps get refined and also big companies finally realizing the importance of a good UI in an app. Android apps have been getting better with some great ones featured here over the past year and iOS apps are just pushing the design envelope more and more. This is a list of UI animations in apps that we (that’s Preshit & Mikhail) think stood out from the rest. We’ve also included videos of the animations to give you a preview, but they look best on your iOS device itself. Fair warning though, this is a video-heavy post. Here’s our list, in no particular order.
Google+ Animation
When Google+ went public with invitations, everyone wanted one. However the lack of a good app on Android and mobile apps on any other platform made most people avoid the network. Google has upped their game on iOS and their recent app releases are just stunning. The Google+ iOS apps get pretty close to making you want to use the network. They are filled with great and unique animations. The one in question here is the pull to refresh animation. When you pull the view down, there are 4 colored bands that get stretched and they become darker and lighter in a rhythmic pattern from left to right. Also interesting is the way new content cells slowly fall into place as you scroll towards the bottom. Little things like this show us that Google pays a lot of attention to the minute aspects of app design. It is worth having the Google+ app on your iOS device only for this animation.
National Parks
National Parks by National Geographic is a drop dead gorgeous app. It has pixel perfect graphics on the iPad and iPhone and introduced everyone to their new view changing animation that influenced many other apps. Tapping the weather or stats button for a park will make the current view move behind and a new view slide up from the bottom of the screen. Every little animation in the app has been done brilliantly. Our other favourite little thing from this app is the pins on the map view animation. When you start playing around with the slider switch, the pins appear or disappear depending on the filter selected. The app is available on the App Store for free with the option to download any one park guide for free with the others available as in app purchases. Do yourself a favour and download it just to drool at the animations.
Letterpress
Loren, Loren, Loren. How do you keep doing it. You had us with Tweetie and now you have us again with Letterpress. Every animation in this game has been executed creatively and beautifully. Every letter you play with moves around the others nicely and the app feels very slick overall. Our favourite part of the app is the animation when a game is removed. The table of letters explodes and the tiles fall to the bottom of the screen with a nice subtle explosion sound. Letterpress did to Game Center what The Magazine by Marco Arment did to Newsstand. The game is available for free on the App Store.
Clear
Clear by Realmac Software is probably the most hyped app to hit the App Store this year. When they debuted the video for the app, every single person we know was talking about it. The app does something very few others do. It takes a menial and often complicated task and makes it simple and beautiful. Clear is full of amazing sounds and great animations. You can navigate through the app with just your thumb by swiping. Marking an item as read or even creating an item in a list looks amazing. You can tug down on the list to create a new item and edit items by simply tapping on them. After marking an item done, it moves to the bottom of the list and can be cleared by pulling the view up. Even the instructions for everything in the app have been animated and make this app stand out even today. The app has a heat map UI with a different shade for each item in a cell. There are themes as well that can be unlocked. Clear recently got updated with iCloud support and Clear for Mac is also available. Clear is Mikhail’s goto list management app.
Twitterrific 5 Pull to Refresh
We wrote in detail about why we love Twitterrific 5. A feature everyone has wanted in the app was pull to refresh. The Pull to refresh implementation in Twitterrific 5 is jaw droppingly good. The animation of Ollie hatching from an egg and flapping its wings as the timeline refreshes is really really good. It is always great to see different and unique implementations of pull to refresh. The other animation we love in Twitterrific 5 is the account changing transition. The new account timeline slides over the old one when you switch accounts. Switching accounts is very simple. Tapping and holding the avatar on the top left will bring up the accounts within the app and you can tap to change accounts. While Twitterrific 5 isn’t as functional as Tweetbot, we love its new look and feel and think it is worth checking out. It is available on the App Store for $2.99 for a limited time only.
eBay Pixelation
One of the biggest app updates for a big name brand was the eBay for iPad app update. With Version 2.0, eBay for iPad introduced an epic pixellation effect when you invoke the sidebar. App animations that can be played around with by sliding your finger are even better. We absolutely love this animation in the ebay for iPad app. The rest of the app is great as well and ebay for iPad is available for free on the App Store.
Deal In
The Deal In app is a fine example of the kinds of animation that delights you when caught by surprise. In the app, there is a brown paper bag at the bottom and a long list of items along with their thumbnail and description. The app lets you choose these items if you feel like you want them and add it to your bag. But boy does it do it in style. When you tap and hold on an item, the cell tears off from the rest, complete with paper tear edges. Then, you just drag it down into your brown paper bag and you’re done. Simple, delightful and so good. The Deal In app is available free on the App Store.
Passbook
You didn’t think we’d make a list like this and not include Apple’s very own Passbook app in it, did you? Passbook has one of the best animations I’ve ever seen that ships default on any OS platform. When you try to remove/delete a pass from the Passbook app on iOS 6, the pass passes (ha!) through a virtual paper shredder that shows up. You are presented a marvelous animation as the pass goes through it and little bits of shredded paper come out through the bottom. It doesn’t matter if you don’t have a pass to try it out, you can just head over to Passsource and add a temporary/fake Pass to the app. Go ahead, we’ll wait. Now wasn’t that lovely?
If you think that we missed one, or if some app deserved to be on the list here, let us know on Twitter or App.net.
Other posts in our ‘Best of 2012‘ series:
Best of 2012: Stock/Default App Alternatives.
Best of 2012: App Icons