Wednesday, August 6th, 2008

iPhone Safari Flick Navigation By Example

Category: iPhone, Mobile

Matthew Congrove took some time to play with the iPhone SDK, but it wasn’t his bag, so he decided to go back to building a Web application for the iPhone, and was pleasantly surprised with the updates to Safari that enabled new things:

In the midst of all my research for help I stumbled across something that I, like most, had completely forgotten about; the iPhone update wasn’t just for native third-party applications, but it also upgraded the existing applications. Yes, that includes Safari. The upgrade for the iPhone’s on-board browser added in support for CSS animations and transitions, a JavaScript accessible database, a few new DOM selectors and more. For me this meant that the myDailyPhoto web application could look and feel more like it was a native Cocoa Touch enabled experience. As soon as the idea crossed my mind I sat down to churn out this little test app.

To get the flick effect Matthew wrote the following CSS:

  1. .divSlide {
  2.         -webkit-animation-name: "slide-me-to-the-right";
  3.         -webkit-animation-duration: 1s;
  4. }
  5. @-webkit-keyframes "slide-me-to-the-right" {
  6.         from { left: 0px; }
  7.         to { left: 100px; }
  8. }

Posted by Dion Almaer at 11:20 am

4.3 rating from 58 votes


Comments feed TrackBack URI

That’s just too easy, for old time’s sake could you throw in some old school css hacks ;P

Well done.

Comment by someguynameddylan — August 6, 2008

OMFG, this is simply awesome!

Say, does the ‘animation’ and ‘keyframe’- from and to keywords state, that it can actually do much more than just move objects? Like if I tell the stylesheet to animate…

from { background-color: green; }
to { background-color: blue; }

..will it animate the background? And how is the animation triggered?

Comment by j4k3 — August 14, 2008

j4k3 –

Yes, you can use it to animate colors, border sizes, opacity, and pretty much any other CSS property. So, for instance, you could do a nice Scriptaculous-esque fade-out without Scriptaculous. I’m sure that the iPhone Safari Developer page has some more insight on exactly what properties are supported; I suggest you go there for the final word.

To answer your question about the trigger, do it through JavaScript. For instance, in the example in the blog post, I’d change the class name of a DIV to ‘divSlide’ through JS. This would then grab the styles for the new class, sees the animation call, and pulls up the keyframes.

Check out the blog entry I wrote (the ‘myDailyPhoto’ link above) for a whole bunch of information on this stuff.

– Matt Congrove

Comment by mattcongrove — August 14, 2008

Thanks to Matt for a great example piece of code.

Just one note, for anyone interested in doing something similar, that the code can be simplified by making use of the CSS “-webkit-transition-property”. You can specify that “-webkit-transition-property” be set to “left”, then when the left property value is changed, the transition will animate the element to its new position; based on the “-webkit-transition-duration” and “-webkit-transition-timing-function” settings.

Hope that helps anyone else looking to do something similar.

Comment by cajhughes — October 28, 2008

Sorry… but an iPhone flick doesn’t work that way.

The animation needs to follow the movement of the finger *as the finger moves*. For example, go to the weather app where you have more than one panel. As you move your finger horizontally across the screen, the panel moves along with it. When you slide your finger all the way over to the edge, the panel moves off the screen and the next one slides into place. Now, if you do this really fast, as in a flick motion, all this happens in an instant.

It is possible to duplicate this behavior with CSS transforms, but this isn’t the way to do it.

Comment by ggw — November 10, 2008

Link is down…anyone? I just discovered this last week and it worked. Now it is broken.

Comment by malaki1974 — February 5, 2009

Here is the link to the full post and examples. I had been looking for it too since the link broke:

Comment by BossMojo — March 5, 2009

Leave a comment

You must be logged in to post a comment.