26
Dec 08

TyphoGraphic: Authoring CSS Transform Animations for iPhone Declaratively

iBlipper Logo
Instant Messaging for the Real World

I’ve been having fun with CSS Transforms (supported by both Webkit/Safari/iPhone and Firefox) as well as the Webkit/iPhone only transform animations. The resulting framerates on the iPhone are hard to achieve any other way. I’ve even built an iPhone app called iBlipper with this tech.

I’m releasing a bit of the source code to MPL, demo below, dubbed the typhoGraphic library.

This is not a major hack, but scratches an itch I’ve had for years to be able to code typographical animation with HTML and an augmented set of attributes — in this case: effect, duration, and start. Check out the iBlipper blog for the demo (plus video) that originated this code, a happy holidays medley.


by andyed | About the author:

Related Posts


Comments


Posted on Friday, December 26th, 2008 at 3:36 pm and is filed under General, Typography, Visualization, iPhone. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
4 Comments so far

  1. 1 Ajaxian » tyPhoGraphic: Declarative CSS Transformations on December 29, 2008

    [...] demo above is tyPhoGraphic a declarative CSS transformation [...]

  2. 2 rascunho » Blog Archive » links for 2009-01-06 on January 6, 2009

    [...] TyphoGraphic: Authoring CSS Transform Animations for iPhone Declaratively I’ve been having fun with CSS Transforms (supported by both Webkit/Safari/iPhone and Firefox) as well as the Webkit/iPhone only transform animations (tags: surfmind.com 2009 mes0 dia6 CSS transformation WebKit) [...]

  3. 3 tyPhoGraphic, transformaciones CSS | aNieto2K on January 26, 2009

    [...] tyPhoGraphic es la última herramienta con la que usar estas CSS Transformations será más fácil todavía, aunque le encuentro 2 grandes problemas: [...]

  4. 4 Monkeying with the Lizard Feeder on January 26, 2009

    [...] plotting some typographical exploration (ala the Mozilla 1.0 screenplay or typhoGraphic) for extracting and aggregating across terms and commonalities like [...]

Name

Email

Website

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Share your wisdom