Animating your iPhone web application

May 29, 2009, 6:18 pm · 5 comments · Filed under: Apple, JavaScript, Web Development

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.

Jump to article

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.

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 Transformations

---

Short URL to this article:
Tweet this article!

5 comments

For HW acceleration on iPhone you want to use:

-webkit-transform: translateX(-100%);

not:

left: -100%

and you’ll likely need translateX(0%); in your default style. There are also gotchas involving whether the browser can determine the width of the block.

★ Posted by: Sean Gilligan · June 4, 2009, 10:56 am

Ah, interesting. I was just discussing with the client whether it made sense to just go with an existing framework (like yours, iUI) so we don’t have to go through the pain of discovering all of these tricks ourselves.

Are CSS animations integrated into iUI yet? The live apps I’ve looked at (from the PoweredBy wiki page) seem to have somewhat rough animations.

★ Posted by: Andrew Hedges · June 4, 2009, 11:19 am

Smooth animation is not released yet - it is in Subversion (revision control) trunk and has been tested by a handful of developers on a handful of apps. You can run the music sample in the trunk to check it out.

The PoweredBy wiki page is pretty old - not updated in almost 2 years - probably not the best example of iUI apps.

p.s. I like the Markdown editor’s handling of links!

★ Posted by: Sean Gilligan · June 4, 2009, 12:47 pm

Always cool to learn what other are willing to share when it comes to the mobile web I am just now getting into learning how to create iPhone apps and look forward to utilizing what I have learned from you here.

★ Posted by: Jen · July 17, 2009, 9:09 pm

@Sean: I tried the animations from the iui trunk on my 3GS, but it doesn’t feel right. The initial delay (before the animation starts) is too long and the animation itself is too fast (compared to native animations). I didn’t check on an older iPhone, so I can’t say, if this is related to the changed CPU-speed of the 3GS, but anyway…

★ Posted by: Andy Fuchs · July 17, 2009, 11:26 pm

Comments close automatically after 90 days.
Still have something to say? Drop me a line!

---

Possibly related posts

• How-to recover from checksum mismatch errors in SVN January 25, 2009
• Dude. Mikeyy can’t even spell his own name. April 12, 2009
• The first 48 hours of PHP Function Reference, by the numbers April 8, 2008
• Dashboard Widgets for Fun and Profit March 19, 2009
• Stupid WebKit Tricks July 19, 2009

---

Home · Blog · Folio · Resume · Widgets · Coding experiments · The Kids Page · Contact