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.
I spent today experimenting with different techniques and am here to share what I’ve learned. Below, I review 2 JavaScript-based techniques for animations as well as the use of WebKit CSS transitions and transforms. Which is best? Read on...
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.
It stands to reason that native code would perform better than interpreted JavaScript code. Based on my first experiment, I rendered a verdict of unusable 4 now. After digging a little deeper, I stand corrected.
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?