This post requires a quick introductory disclaimer: I’ve got a pretty negative opinion of Flash. It’s been the cause of too many browser crashes and computer slowdowns for me to be much of a fan. I’ve supported Apple’s stance on Flash support for their mobile devices because it’s saved me from having similarly awful experiences on my phone. Another perk: Apple’s firm “no-Flash for mobile” stance has forced web professionals to look beyond Flash for other ways to animate experiences online. Some awesome possibilities have arisen that not only treat browsers nicely, but are (for the most part) cross-platform and mobile-friendly.

It’s hard not to call these techniques “new,” since they’re effectively replacing a tried and true competitor. But many of them have been around for a quite a while. However, their modern implementations are sparking a lot of creativity; using them on your next web project could garner you some industry buzz. More important than buzz, though, is that these post-plugin animation techniques degrade almost seamlessly, allowing you to create beautifully interactive websites for modern browsers that still function well for those poor suckers stuck on IE6.

Luckily for us, Futureweb* animation techniques easily fit in with modern web development methods for separating content, presentation and behavior. This means that you can start adding (and later editing, re-envisioning, and removing) animations to your site without much effort and without grossly disturbing your content or layout. Let’s take a look at how this plays out:

Animating Content

Did you know that you can still create images that animate on their own?! The GIF isn’t dead yet, folks — and it can actually be useful for animating things other than internet memes.

Ok, so the animated GIF isn’t anything new, but it’s often neglected when it doesn’t need to be. Animated content can also include new HTML5 specs like video, audio, and canvas, which are all animated elements that can be played in browser without Flash. Including animated content on your page can add that special something needed to really bring your designs to life.  

Awesome example: http://www.helenandjoshsittinginatree.com This wedding invitation is extremely cute and effective, and the animated GIFs only support that intent.

Animating Presentation

It’s been the practice for years now to separate style from content and use Cascading Style Sheets (CSS) as the primary method for styling page elements. Now all that hard work of separating style from content has finally paid off, and included in CSS3 are numerous ways to animate your content’s presentation. We’re talking 2D transforms (skew, rotate, scale, translate), easing, 3D transforms, fades, zooms, and more. Once you start combining these techniques, the possiblities are almost endless. Using CSS3 animations, you can keep your content and your presentational animations separate, meaning that your page is still degradable. Not on the newest version of Safari? Well you might not see the headline pulsing, but you’ll still be able to see the headline. 

Awesome example: http://panic.com/transmit This sales site for Panic’s FTP software Transmit shows a great use of CSS3 animations. In a supported [WebKit] browser, the points of interacting on the screenshot pulse, begging to be played with. In an unsupported browser, the points can still be interacted with, but they don’t pulse.

Animating Behavior

The third layer of a webpage is its behavior: what happens when the users interact with it. This includes animations when you hover over an element, when you click on an element, move your mouse around, or any combination of the three. JavaScript has become the primary tool for animating behavior, and more recently the jQuery library has made behavior based animations as alert (“Hello World!”);.

Awesome example: http://www.lightmaker.com/portfolio/  This site oozes javascript animated behavior. Colors gradate on rollover, if you click on something almost every element on the page changes in some way, images animate in, it’s pretty amazing. Hit the slide show button and watch the magic happen!

Where to go from here

Animating your webpage can be fun and easy (I sound like a “for dummies” book). But seriously — it’s pretty easy to do and can add some new and compelling elements to your designs. Don’t be afraid to experiment. These techniques are not meant to be implemented alone and are best used in tandem with each other. Imagine what could happen when the presentation of some animated content gets involved with some behavior animations? Yeah, that just blew my mind too. 

Some resources to check out: 

*Yes: I just tried to coin a new term. Futureweb what happens after Web 2.0, but before the postmodern web explosion.

About Micah
Micah Spieler is a designer at Clockwork. Micah’s creative career started with finger painting as an infant. Once the internet came along he knew he had to find a way to finger paint the web.
More About Micah | Follow Micah on Twitter