animation on the web

animation on the web

The introduction of Flash on the web caused a pretty big shock. It was a tool specifically built around animation, allowing web developers everywhere to go haywire with this new-found power. The result (as always when new techs arise on the web) was quite horrendous. Ridiculously long loading times, CPU killing websites and zero accessibility. It was obvious that there had to be better ways to provide animation on our little internet.

So we expanded our reach to javascript (and later css). And surely, soon enough people started to create whole javascript libraries offering various nifty little animation effects to use at will. Yay for web standards and all that, we love to battle corporate solutions and take matters in our own hands, coming up with solutions that use free and open languages. Sadly no-one seemed to be interested in the big loser of this particular success story: animation itself.

javascript vs css

Javascript animation has been around for some time now, since a year or two browser vendors and rendering engines have started experimenting with animation in css. Nothing very stable yet, all proprietary stuff that fails to work in any serious cross-browser way, but it's a start alright. Good stuff for the inner geek in us, but where is css animation supposed to be positioning itself compared to the other animation alternatives? It bothers me that css animation is often thought off as a simple alternative for javascript animation, which should not be the case at all.

I could be wrong of course, but I've always thought we were striving for a web development model where content, style and functionality remain as separated as possible. For animation this means that we should differentiate between graphical animation (just some nifty styling effects that don't have any functional merit) and functional animation (content is shown or hidden using expand/collapse, flip boards, state changes...). For graphical animation css is fine (graceful degradation comes naturally too if you plan it well), but functional animation should remain written in javascript. Chances are though that people will pick a solution depending on their own strengths (I'm better at javascript or I'm better at css), rather than picking the appropriate technique for the job.

I guess it would be nice to see some insightful discussion about this topic rather than run into the next browser-dependent showcase of badly animated nonsense. Just a couple of years ago there wasn't moving much in css and html land, but at least people were still interested in best practices.

fluidity and continuity

What bothers me more though is the decline in animation standards. Flash animation was pretty much okay for websites. It was too limited for animated films and such, but stretching, morphing and translating is all done pretty fluidly. It comes at a rather high cost of CPU power, but that's the trade-off you're up against when choosing to incorporate animation. Now, fluidity isn't going to be my biggest concern here. For example, I'm a big lover of claymation, a form of animation that's rather stilted by default, so that's not really the point.

What does matter though is continuity and that's where both javascript and css animation fall flat. Both languages aim for a best-effort implementation, often (pretty much always) resulting in performance spikes completely ruining the intended animation effect. Animations can start of fluid, turn choppy and end up being fluid again. The slower/CPU intensive your computer, the worse it gets. Of course it runs quite great on our beta versions of the next-gen browser when all other programs have shut down, but most people don't get nothing close to the intended effect and so the reason to include animation in the first place becomes moot.

conclusion

Maybe it's because I'm quite fond of animation as an artform, but I guess there's a little more to it than that. Many sites add animation to show off technical skills, but fail to awe with their actual animating skills. Recently people have been talking about the new beercamp site, to me this is the best example that if you can't do something right, it's better to not do it at all. The project is offensive to anyone with even the slightest grasp of the subtleties of animation, turning the whole site into one incoherent, laughable mess. And it's even worse in fall-back mode (but who uses Firefox these days huh).

Javascript and css will never quite succeed at providing quality animation if they keep clinging to best-effort performances. So far I've seen very few examples of animation on the web that work, outside the boundaries of Flash that is. Most developers don't seem to be bothered by this. Animation is equal to going from a to b, no matter how fluid or continuous the resulting animation is. The fact that it moves is all the thrill needed, while the standards of web animation have dropped far below zero as a result. A real shame if you ask me.