I remember when I first read about the CSS Animation and Transition modules. I was worried. It seemed to me that the clear separation between presentation and behaviour was getting murky. Change was scary, I guess. But I was wrong before; about where the line was.

We’ve been using $.slideDown and $.scrollTo and $.animate to make our DOM elements move, move, shake, shake now drop. Everybody! And we happily characterised that as behaviour. That was wrong.

Behaviour is responding to an imperative from the user. It’s saying, “She clicked this, now we’ll do this.” The problem with these animations were that they were getting in the way of our responding to user interactions because we were to busy “moving”. This led to fighting with the user, a lot of “shaking” and ultimately came the “drop”, when our websites broke because we were so busy trying to impress our users with jazz that we forgot to actually listen to what they were asking us to do.

Javascript, as we all know, runs on one thread. Fill up the queue with a bunch of animations and it will take a long time for our user’s request to make it to the front of the queue. Intersperse old responses with new requests and it gets even worse (ever had to fight a $.scrollTo because you changed your mind about that click?)

That scroll isn’t really part of the response to the request. The request is, take me to this place on the page. The response should be that. Here you go, we’re now on this part of the page. The smooth animation between those two points is very much presentational (albeit one mimicking a behaviour but still very presentational.) That presentation belongs in the presentation layer; the CSS. And a transition seems like the right job.

Same with animations. They are never a response to a request. They just get in the way of our responding to requests.

Javascript is our field-marshall. There’s one queue (that one thread), and its job to is delegate jobs so it can respond to new requests quickly. Its response for $.scrollTo should be, “Here you go, now CSS, make this move pretty.” It’s handed off that transition. It’s free to respond to new requests because its respond was instant. And you are merrily on your way to your new destination.

Don’t waste your field-marshall’s time with nonsense.