I'm currently on parental leave till September. During that time, I will not read any e-mail or blog comments.

Until I'm back, please read through my archives, take a look at my code/applications and check out my pictures.

Have a great summer, and a splendid winter to you aussies and kiwis!

JavaScript animations

Published on Monday, December 19th, 2005

First, just for you to understand where I’m coming from, let me tell you that I love JavaScript. It has given me, and continues to give, immense pleasure when it comes to web developing and I’ve been writing JavaScripts extensively since ‘99, doing everything from minor validations and other checks to things like animations, Flash fallbacks and a Web OS.

So, let me move on to the topic of JavaScript animations. Faruk recently launched his web site, and more specifically presented the project he and Tim Hofman have been working on:the FACE project. To simplify, it’s a way of adding animation and visual effects to a web page through JavaScript and CSS. While I have no major objection when it comes to the code itself, I’m not really so sure about the concept.

Animations through JavaScript doesn’t really give the lean smooth experience technologies like Flash or manipulating vector graphics in any other way can, and using filters is, at least in IE, infamous for slowing the web browser down and draining the memory. While I like the idea of not being dependant on any plug-in to create an effect, I think Flash is spread widely enough to not be a problem.

Another perspective is that I, as a user, have a way to choose what kind of web site I want to visit. If I want a web site that is visually a rich experience, and maybe with sound as well, I visit a Flash-based web site, who normally offer a non-Flash version of it as well. But if I visit a “normal” web site, I really like that things aren’t moving around, blinking and flashing, and generally stealing my attention from the content.

This paragraph is probably going to sound a bit harsh, but the only reason I’m writing it is because I went through the same kind of evolution myself. While being very talented otherwise, Faruk is fairly new to JavaScript, and he’s now doing exactly what I did when I reached that level: creating animations. So, what I wonder is if he and Tim create this because they can, or because there’s a user base out there asking for it?

In general, I think adding interactivity to web pages through JavaScript is the right way to go, but then I think approaches like AJAX and its likes are fundamentally more interesting than animations. However, this is merely my humble opinion. I might be totally off-key here and people out there really long for this.

So, tell me what you think? Are JavaScript animations just the new animated GIFs, or are they the future?

Posted in Developing, JavaScript | 12 comments

12 comments

Jeroen Mulder
December 19th, 2005 at 11:06

I am somewhat sharing your opinion, but as with Flash, Javascript animations are usefull in other areas than the internet as well. Personally, I am mostly excited about combining S5 with FACE to create more rich presentations.

Animations in combination with markup, what FACE is doing, requires two questions to be answered if you want to know whether this solution is viable:

1. Is the animated content communicating a vital part of the document’s message?

2. Is the animation supporting the message or creating the message?

If the answer to the first question is yes, then it does make sense to include such data as markup in your document. I am not saying a Javascript solution would then be the perfect solution, but it does become a solution worth consideirng.

If it’s not, then I would most likely favour Flash over a Javascript solution, because of the possibilities as well as the nature of Flash versus the nature of HTML.

The second question is important if you want to make decisions concering the design of the animation. A Javascript solution has the disadvantage of firing once the page is loaded (as clearly seen on Faruk’s frontpage) and potentially being slower than a Flash solution.

If the animation is merely supporting the message as part of interactivity, then I would favour Javascript over Flash. If the animation is creating the message, then I do think Flash suits that job a whole lot better.

Ugh. This ended up being long again..
Faruk AteÅŸ
December 19th, 2005 at 11:15

The main point behind FACE is so that it can be combined smoothly with other things, for instance AJAX.

There is definitely a demand for it — lots of web designers have customers who want a more lively site, nearly always forcing them to use Flash. Since there are many disadvantages to Flash, a solution to create liveliness without having to use Flash is a good solution to those people.

Is my site a good example of what it can offer? Yes and no. The examples I have on my site are purely a showcase for how flexible and also powerful it is. It also shows us that when JS is disabled, nothing is lost, and how you can now use it to give some flair to parts of your site that you really don’t want to put in Flash (like navigations).

However, my examples don’t really serve a purpose beyond “flair” and what I just mentioned above. So, it’s time to create some examples that showcase the technology more as a useful enhancement
Jere
December 19th, 2005 at 12:42

In general, there aren’t lots of semantics involved in animations, but a combination of HTML, CSS and JavaScript can allow you to do lots of nice effects should keep the content fairly accessible.

Have a look at better browser. While in this case, I find it better to use a noscript element and hide the content from non-JavaScript users, you’ll see all the text is nicely in the markup (turn style sheets off). Better than proprietary formats like Flash.
Steve Williams
December 19th, 2005 at 17:02

I’ve been disappointed with the apathetic and negative reactions Faruk’s FACE project has attracted.

Unless I’m missing something, AJAX via *prototype.js* has a 30k overhead, which in my opinion makes it unsuitable for use on sites that must accomodate 56k dialup (FACE is 8k), and Flash has significant cost/learning curves associated with it as a dev tool.

But I use animated gifs on my site for the home and accessibility nav icons! So perhaps my reaction is only to be expected?
Hakan Bilgin
December 19th, 2005 at 17:50

Robert, I agree with you, though you have some bold claims, considering the party. I think there is a lot of skilled people here.

I say, live and let live…there is always new and better ways to do stuff. Obviously, Faruk is showing us these new ways. But in my humble opinion, Javascript isn’t yet suitable for animations. At least not untill threading and multitasking is available.
Robert Nyman - author
December 20th, 2005 at 9:52

Thanks for your comments!

I mostly share Jeroen’s point of view: it depends on how important the message is and what you want to convey. I really do appreciate the accessibility factor, but I still stand by my point when comes to performance and that JavaScript isn’t the optimal tool for creating nice visual animations. Or rather, I guess I should also say that the rendering in web browsers isn’t ready for it either.

However, I wouldn’t go so far as to say that Faruk is showing us these new ways; these kinds of animations have been around since 1999.

But Jeroen:

Personally, I am mostly excited about combining S5 with FACE to create more rich presentations.

I take that as a typo, naturally you meant AJAX-S, right?
Jeroen Mulder
December 20th, 2005 at 10:18

Robert, haha, whooops. I haven’t actualled used AJAX-S yet, though I have used S5, so naturally I used that. Though, of course, it goes for the concept both solutions implement.
Robert’s talk » Enough
December 20th, 2005 at 12:56

[…]Enough[…]
Bob
December 20th, 2005 at 13:36

I think when you see this upcoming CMS, the Italian people at Mad4Milk use JS/DOM animated fx in a good way! Only some fades, em text altering, resize width an height, textarea. This is were it is good for IMHO:

Use (login: demo, password: demo) at a ne xample
Bob
December 20th, 2005 at 13:38

Forgot this one (the animations)mooFx
Robert Nyman - author
December 20th, 2005 at 14:28

Bob,

It looks just fine, but at least what I saw is not really animations per se, but just some nice interactivity.
Gino Viroli
June 26th, 2008 at 16:57

Do you really think: “Javascript animation doesn’t really give the lean smooth experience of technologies like Flash” eh???

Have a look at this Javscript animation then:

Vision sensor SVS2 animated with javascript

And it’s not even done using mootools or other animation libraries that would make it even better.

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.