Animating your iPhone web application
29 May 2009 · Estimated reading time: 3 minutes
Recently, Rebecca Murphey asked on Twitter why she was seeing choppy animation of CSS transitions in her iPhone web application. Initially, I had the same experience, but through some experimentation came to find the smoothness I craved.
I’m in the midst of some mobile web app development. Our first target platform is, of course, the iPhone. An issue of utmost importance when attempting to emulate a native application in an iPhone web view is rendering smooth animations for things like page transitions.
All of the animations use a duration of 250ms. Click the viewports (touch on your iPhone) to see the animations. Right-click on a viewport and select “View source” to see how it’s done. If the animations don’t go, follow the link beside the viewport to see the stand-alone page.
The viewport to the left represents my custom attempt to provide a smooth animation experience. It combines a time-based, strictly linear animation algorithm with a small delay between invocations in an effort not to stress the wee iPhone CPU. It’s OK, but the lack of easing looks unfinished.
This example uses the excellent Animator class to handle the animation. It includes an easing algorithm that makes the animation look a little nicer. Not bad, but it doesn’t quite feel like a native application.
This example leverages WebKit’s native CSS transitions. Of the 3, this is the simplest to code and it also offers the best performance. The pages seem to “snap” into place, unlike the other examples.
Honestly, I’m not sure what was vexing the examples Rebecca and I were looking at earlier. It could be that my first experiment with CSS transitions was trying to do too much (moving 4 divs while changing the opacity on 2 of them). The above examples are extremely simple cases, so they’re bound to perform better.
Update: CSS Transforms
Based on comments below by Sean Gilligan, developer of iUI, I have added a fourth example. This one uses
-webkit-transform: translateX to achieve hardware acceleration on the iPhone. I’ve also slowed down the animations to 250ms to accentuate the differences between the various techniques.
I’m not sure it’s better, at least on my phone. What do you think?