ItsAllEasy

FACE seems to be making the rounds today: http://kurafire.net/projects/face. I was elated when I saw them using the class attribute to tie in the behavior…but then later worried about how much is crammed into it. We all agree that separating presentation (css) from data (semantic markup) is important…I think that FACE is violating a separation of the data from the behavior. With face you have a css class that looks something like this:

class="C:myClass:10:L:20:50"

Each ‘node’ there is a property that describes the animation. The animation code will effectively add and remove a css class to an element (or set of elements) based on the specified intervals and properties. Which is cool, but I think its too close to the markup: its IN the markup. I understand that part of the goal of FACE is to be as simple as possible, the developer doesn’t even need to learn or know javascript to make it work. However I’m concerned about the cost of this goal. I now need to modify the markup to modify a behavior/animation and I feel that that is a violation of separation of concerns.

I think a very, very simple set of javascript could achieve something like this. One could have a script file dedicated to setting up the FACE animations for the page or even the site.


Face.animate('#enhance', 'myClass', 10, 'L', 20, 50);


The animate function could use behaviour.js or cssQuery.js to locate the node indicated by the selector (first argument) and then run through the animation sequence as it does now…this really just changes the method of starting the animation to be more direct (the developer could have more control over when the animation begins) and (more importantly) the details about the animation are more removed from the data. Also, with this approach, there would be no need for the #enhance element…or the quirky way to have multiple animations on the page (indicated by a comma separated list of ids as the last node in the #enhance elements FACE css class descriptor). The developer could use whatever css selector best identifies the element to animate using the css classes and ids already defined in the markup. And the Face.animate function could be called for however many elements need to be animated.