FACE: Faruk’s Animated CSS Enhancements

Faruk Ateş recently redesigned his weblog, The KuraFire Network. This latest redesign is the eighth version of the site, and it is interesting for reasons beyond the nice-looking design and great content.

If you visit The KuraFire Network you may notice Faruk’s subtle use of animations to highlight various elements on each page. You’d be forgiven if you were to think that he’s using Flash to create some of those animations, but he is not.

What is driving the animations at The KuraFire Network is FACE: Faruk’s Animated CSS Enhancements, a technique that combines the power of JavaScript with the flexibility of CSS to enable designers to create animations without having to know Flash or JavaScript.

After looking at Faruk’s examples and reading about the technique, I think FACE is a really good example of using web standards instead of relying on proprietary plugins to add subtle visual enhancements to a website. Flash is often used to create the same kind of animations that you can now use FACE for.

More information on the KuraFire Network redesign and how FACE was born is available in Faruk’s post Introducing V8.

Posted on December 19, 2005 in CSS, JavaScript, Quicklinks

Comments

  1. December 19, 2005 by Mikoyan

    I hate to say it, but it crashes my Opera (8.5). A friend of mine has tried it as well with same result. Great work though, will keep my fingers crossed this bug gets fixed.

  2. December 19, 2005 by Justin

    Um, the site is a stopdesign.com rip!!

  3. Works OK here in Opera 8.51.

  4. I like it, and I’m usually not a fan of animations on websites. It crashes Opera 8.5.1 for me too, though, on the onmouseover event.

  5. Ah, it’s awful! This reminds me of worst animated DHTML from end of 90’s. Not talking about the fact that my state-of-the-art computer slow downs to zero because of those animations.

  6. While there is a memory leak (supposedly, not confirmed) that we haven’t fixed yet, I’m very interested in seeing what you consider to be state-of-the-art. It has worked fine on 700 Mhz pc’s with Windows 2000, albeit a little slower than on a 2 Ghz pc of course. However, it didn’t impact the system’s resources in any way.

    Maybe you’re willing to help us out with testing, if you’re so concerned?

  7. Opera 9prev.1 on win2K doesn’t seem to have any problems with it. Looks like a good option.

  8. Indeed, that was also my first thought when visiting the site: the layout of kurafire.net is clearly inspired if not copied of www.stopdesign.com.

    As for the “FACE” technique: I am really getting tired of all these people who think they re-invented the wheel.

  9. Carlo: inspired, yes, copied, no. I had the dual-navigation with the primary on the left and the secondary in the top right for ages, but the previous version didn’t have a picture in-between the two (which I did have planned for the longest time). Furthermore, there’s quite a lot of differences, for instance, my layout is elastic, making things a lot more challenging.

    As for “re-inventing the wheel” — I never claimed that, all I’ve said is that I’ve created a very easy to use, quick to implement, flexible solution to something a lot of web designers and developers have problems with, which often forces them to resort to Flash or disappoint their customers. In that, FACE is pretty successful. Is it the first technique to allow Javascript-powered animations? Heavens no! But it’s the first that lets you create them entirely with CSS, that doesn’t require you to know a single line of Javascript and that can be hooked up into existing pages with absolute minimal effort.

    Re-inventing the wheel? Not at all. Creating one simple, generic and easy-to-use solution to a variety of problems? Definitely.

  10. Faruk: no insult meant. I am using 2,2 Ghz Centrino (the latest generation - Sonoma if I am not mistaken), 2 GB RAM, Linux, Firefox…

    The first title (with logo) animation is slow, but computer runs OK. Those animations at your website (e.g. Contact page - texts coming from the right side) are slowing my computer down quite lot.

  11. I am really impressed by FACE. There are some things on the site that I would’ve left un-animated, or less attention-seeking, but hey, it’s not only a proof-of-concept, but also personal choice (now, do you build a website in the way you like it, or the way every single visitor from all over earth likes it…?). I like the concept of it, and when I feel the need for animation next time, I’ll give it a try. Thanks very much for putting it out there.

    NB It works fine on XP/Firefox 1.5, but why wouldn’t it?

  12. Dusoft: what version of Firefox are you using? I haven’t tested it much on Linux myself, but you’re the only one who seems to have slowdowns (well, the only one who’s reported them).

    On my Powerbook 1.67 Ghz with 1.5 GB ram, Firefox 1.5, OS X 10.4.3, all the animations run fine and I’m not seeing any system resources being hogged whatsoever. I’m very curious about this — which version / flavor of Linux are you using? I am, of course, very much interested in finding out what is the cause of this problem :)

    Matthias: yes, my site isn’t so much a practical, business-sensible display of what FACE can do, more a “this is new, and look at how flexible and versatile it is” kind of display. There’s a lot of animations on my site that aren’t necessary, and have only been added as flair, to showcase that pretty much anything is possible with FACE.

    There will be more useful, practical user-focused enhancements soon, in the examples that we still have in store. :-)

  13. It took me awhile to figure out where the animations were. I middle-click on links to open in the background and the animations were done before I even got to the site. :)

    The site is certainly different enough from stopdesign - compare them side by side and you can tell they are completely different. The similarities are really more in the basic page structure. It’s got the “stopdesign essence”.

    It’s nice though. Btw: performance issues are likely on the Mac. Especially if playing with opacity… that and fixed positioning apparently bring those poor macs to a crawl.

  14. Faruk, I have the same problem as dusoft I think. While I was excited about the possibilities at first, the example runs very sluggishly on my Athlon 1800+ with 512MB RAM on XP. The example animation (the one with the squares) slows my Firefox 1.0.7 down considerably, and it affects scrolling, cursor movement and even tab switching. As I understand it, on mouseover a square goes through different colours, from light to dark blue, well, in my case there’s a 2 second delay before the animation starts and sometimes it stops for several seconds in mid-annimation if I move the cursor over more squares.

  15. No offense, the concept is cool - but it still has some of the same annoyances of flash. IE - Your contact page loads all links at the bottom. They come in rather slow - and each page refresh you have to wait again for them to animate in. I know this is an example site of your work - but it could also be inspiring others to revert to senseless animation.

    I like that is is NOT flash, and I dont want to come off as a jerk. I think what you have done is cool. I didnt think you were reinventing the wheel - its just nice when other developers come up with quick solutions (whereas some may not have the time). Keep up the great work and Im sure you will only improve on it from here!

    Peace, Nate

  16. As much as I admire the effort that went into this and what KuraFire does I have to agree that it is not really useful and potentially dangerous in the hand of overenthusiastic developers.

    If a client wants animation for animation’s sake it is up to us to point out the problems it causes, not find a newer technology that does exactly the thing DHTML suffered most from - bells and whistles.

    Technically it is a great feat, but I’d be really interested in the ” more useful, practical user-focused enhancements ” you talked about.

    Even powerpoint presentations have less and less animation these days, let’s not go back to wow-ing the client and p*ing off the user again.

    We can create proper object oriented, DOMscripted and CSS class-controlled marquees, too, that still does not make them a better site element.

    Moofx and scriptalicious already did the same as this - we don’t need more animation engines, do we?

    Mark Rowe posted some interesting thoughts on javascript usability back in July, and I still have to agree with a lot he says.

  17. I am using Firefox 1.5, Slackware 10.2 with KDE 3.4.2. Flash runs alright, other DHTML animations seem to run OK too (e.g. those at scriptaculous)

  18. Chris H.: everything can, and will, become dangerous in the hands of some. Guess that leaves it up to others to find proper uses for it, if there are any.

    I think there are, but I have yet to come up with a case where any kind of animation is adding something positive to the experience, or value to the content.

  19. Jonathan: thanks for the comments. Also, my Mac runs it just fine, but I guess older Macs could well have a problem with it. Just like old pc’s, of course.

    Pete, dusoft: Mark Wubben told me that there -might- be a memory leak in the Javascript. It’s possible that this leak does indeed get triggered on your pc’s and not on mine and other’s. No idea yet, but we are already looking into this problem. Once we get it changed (hopefully: fixed) we’d greatly appreciate if you guys could give it a test, to see if it improved for you. As for Pete: maybe try and upgrade to the new Firefox 1.5? The 512 MB ram shouldn’t be an issue, really.

    Nate, Chris, Georg: there is definitely a strong argument about how my site currently implements this pretty much just as “flair” (one could even say needless flair, but I find it a pretty fair thing to say that the interactivity does give the site more life than other sites). However, if you look at Rapha.cc’s webshop, and add some products to the basket there, you can see how a small animation can be quite useful. Such animations can now be done more easily with FACE, and also in many, many different ways. Already we’re seeing people use AJAX and then some animation to highlight the change in the page — FACE offers many more possibilities for such implementations, and that’s where the enhancement value truly comes into play.

    Our next examples will showcase this more.

  20. Georg, there is the yellow fade technique in basecamp, which has become such a classic example of useful animation that it ended up in the web2.0 bingo sheet.

    You are right that it is the responsibility of the developer to use a technology for good. However, a name like “animated CSS enhancements” does not help there, as it does attract CSS designers who do not know the issues of memory leaking, and DHTML slowing down the client and at the same time doesn’t invite hardcore JS application developers to take a look and participate in fixing it.

    This is the big chasm we are facing right now: Designers who want to use JavaScript and lack examples and developers who used JavaScript for a long time and lack design skills or the design “eye”.

    I just see animation engines - no matter how slick - as history repeating, nobody in the DHTML days cared if a script was bad as long as it moved stuff on the presentation machine and the CEO’s computer.(I am not saying this script is bad - it is just normal for DHTML to be slow, as it uses a browser engine through a JavaScript interpreter instead of natively)

    Modern scripting with AJAX is so much more powerful, and can be used to create really cool content enhancements, as for example the live text translation script shows.

  21. Faruk, it should be a minor leak, and I’m afraid nothing that would use up huge amounts of CPU time :)

  22. Using Firefox 1.5 on Ubuntu Linux, on a Duron 1Ghz, all the animations are fine.

    If people are having slowdowns on faster computers, then I don’t know what to say.

  23. I disagree with the entire point of FACE. If you’re going to need animation, I think this is a reasonable option for Flash.

    Additionally, sIFR can be animated, I believe, by simply adding animation to the movie.

  24. Jeff,

    There are numerous examples where Flash is really not an option. You do NOT want to have a Flash menu, Flash secondary navigation, Flash secondary content, Flash-powered AJAX / Dom Scripting that puts things into the page without reloading. Those are all situations where life and interactivity is desired, but where Flash is not an option at all.

    sIFR only works for headings, which is one of the few things that I really see no benefit for to be animated. So, sIFR cannot possibly serve the purposes for what FACE is made, additionally, it requires Flash, and one of the primary reasons behind FACE is the fact that Flash is generally (99.9%?) used in inaccessible ways. FACE is accessible. Highly accessible, even.

    So I’m sorry, but I really disagree with there being no point to it.

    Mark,

    Then there’s something else going on which only some people have problems with. Could be a configuration that combines poorly.

    As Christian explains, there are quite a lot of animations that have proved very useful and popular. Before, these were all custom-made, hand-written in Javascript, and while they were all different, they had the exact same purpose. It can all now be done with one simple script, and one no longer has to know Javascript to do it.

  25. <div id=”enhance” class=”C:more:15:L:30:80”>

    It runs beautifully and I can see it being very easy to implement, but it seems to me that in some ways it’s step back to the glorious FONT tag, or at least their later day equivalent — inline styles.

    I haven’t played with it, but if I understand rightly, we’re inline coding the information about the speed and type of an animation into the body of a document.

    In two years time, when I’ve published 250 posts, and then tired of the zooming effect on my list items, what becomes of the strange ‘morse code’ classes throughout my pages?

  26. December 21, 2005 by Roger Johansson (Author comment)

    Alex: I’ll have to agree that the class names look a lot like inline styles. Hmm. Compared to inserting an entire Flash file it seems quite innocent though.

  27. AJAX yawn … FACE snore … I’m sorry, but I have a strong distaste for animations. I’ll let my content speak for itself.

    I find it humorous however to see Faruk Ates act as if he is being personally attacked with every comment.

    You created something. Congrats. For those developers interested in using it, have fun. But not everyone is going to find a use (or in some cases an interest) in the “rich, powerful interactivity on the Web platform”. (http://kurafire.net/projects/face).

    Relax, wouldya? :) Ciao.

  28. Alex: if you’re using it on each entry, I would expect you to put FACE into a template, not into actual content. That’d just be bad practice for anything, FACE or otherwise.

    You have a point, though. The reason we’re using a class attribute is so that you don’t have to fiddle with the Javascript to control things, as well as making it possible to have completely different animations on the same page. Not doing it this way simply means you’d have to be a good Javascript programmer to have this kind of ability and flexibility.

    Dave: yeah, I know. I’m not feeling attacked, really. When people ask about FACE or state something that isn’t entirely accurate, why wouldn’t I step in? I’m not trying to convince people to use it, I’m trying to bring clarity where there is confusion.

    Of course this stuff isn’t for everyone. There’ll always be people disliking it, such is life, I know that. I’m just going to try and make sure people understand it for what it is, no more than that.

    If that makes you think I feel personally attacked, so be it. I’m really not getting worked up here, you know :-)

  29. Alex: if you’re using it on each entry, I would expect you to put FACE into a template, not into actual content. That’d just be bad practice for anything, FACE or otherwise.

    Cool Faruk :) there’d certainly be no big issues using FACE on template content. I’m tackling 6 years of pages sprinkled with onclick events that I’d love to make disappear, so potentially problematic inline elements are in my thinking at the moment.

    A lot of the examples are quite flashy which is possibly skewing some peoples view of FACE’s usefulness. Could I suggest a few examples focussing on maybe usability improvements?

    But not everyone is going to find a use (or in some cases an interest) in the “rich, powerful interactivity on the Web platform”.

    Dave, is there any technique/methodology the everyone finds of use? Of course, this method is suited to some situations better than others. Animation doesn’t have to, and shouldn’t be in competition with your content — it should ideally be supporting it. Chris gave the example of the yellow fade. How does that detract from your content?

  30. Alex, we’re working on creating more useful, usable examples that highlight the usability enhancement-aspects of FACE rather than its versatility and flexibility. :-)

  31. Excellent, Faruk. I’ll look forward to checking them out.

  32. Nice work Faruk! I myself have written an ‘article’ on javascript animation on my site which has recently been featured on domscripting.webstandards.org

    Sorry for the blatant self plug but I thought this is a relevant matter for those interested. It is a technique for using css properties in JS that use numbers, or it could be slightly modified to animate with strings (e.g. changing background image)

    Of course this probably wouldn’t rival FACE, but it is to give an idea to people who wants simple animation done on slightly simple terms. (My Table Of Contents list throughout the site use color fading for headers actually, much like the yellow fade).

  33. March 2, 2006 by jbot

    This is quite classy, but it seems to me there are probably slicker ways to achieve the same, while using the same premise.

    Firstly, instead of using ID and class attributes to trigger the initialisation, why not use invisible named anchors to demarcate the block to be animated. For example:

    <p><a name=”enhance” class=”S:slide:10:L:20:0:glow,slide2” rel=”face”>This paragraph will be animated by “slide”</a></p>

    Another method might be to add the animations using XBL or HTCs, thereby keeping markup uncluttered and allowing ID and class attributes to be used for other things.

    Just a thought.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.