HRB

Building a New Web: Seamless Animation

February 24th, 2010 by Categories: Internet Technology, Website Design Tags: , , , ,

View Live Demo (Requires Safari on a Mac, sorry)

For years now, there has been only one way to make things animated on the web. Flash quickly became the dominant technology for animation due to the complete lack of competition. It also provided a great vector graphics platform that’s capable of providing graphics with a very small file-size. There is another technology for animation, but it isn’t a fully-capable Flash replacement. JavaScript provides support for very simple positioning, resizing, and color animations, but doesn’t have the ability to do anything more advanced than that. Considering that JavaScript wasn’t built with the intent of using it for animation, things as simple as rotating an object simply aren’t possible so it isn’t a viable solution for most applications. What it manages to do is provide a nice middle ground between a static page and exporting and embedding a flash animation.

The latest development is an iteration of an existing website design technology called CSS (Cascading Style Sheets). CSS has been used for years as the primary technology for styling websites. When you view sites without CSS enabled they all look the same; white background, blue links, the same serif fonts, nothing positioned in the correct place, etc. Essentially, CSS keeps most websites from looking like they could have been made in Microsoft Word. This latest version of CSS (using HTML 5) is drawing the attention of web developers because it will provide full support for advanced animation.

Not only will CSS provide support for the basic animations that were availble through JavaScript, but it will also provide the capabilities of rotation, skewing, 3D, and more. There will also be a performance boost compared to other animation technologies, because CSS has been fully optimized for the single purpose of rendering graphics on a website. It will also be able to utilize the powerful graphics cards that computers ship with today, and that’s something that has yet to be taken advantage of on the websites that most of us visit.

Connect with HRB:


It is important to compare Flash and CSS because it’s worth understanding the advantages and disadvantages of choosing one over the other. There’s no denying that Flash has a well-established install base and provides vecor graphics capabilities that are still some of the best out there, but for the most part CSS is giving Flash a run for it’s money in terms of animation. I’m not proclaiming Flash to be dead, but I definitely hope that this level of competition will push Adobe towards more innovative thinking than they’ve had in the last few years.

Kurt Zenisek
Lead Web Developer

Kurt Zenisek on LinkedIn Connect with me on LinkedIn: www.linkedin.com/in/kzeni

Follow Henry Russell Bruce on Twitter Follow HRB on Twitter

Become an HRB fan on Facebook Become an HRB fan on Facebook

Leave a Reply





 

Some visitors also read:

  1. Building a New Web: A New-level of Interaction
  2. Building a New Web: Software Standards
  3. Building a New Web: HTML 5 Video
New Look!