Improving the web platform with animated UI

This blog post is an expanded version of a comment I wrote for Bruce Lawson’s blog post about what the web platform needs next (it hasn’t shown up at the time of writing, so it’s either held in moderation or didn’t submit properly). The ideas it contains are things I’ve been thinking about for a while though.

One area where I believe web apps still fall behind native apps, particularly on mobile, is in providing rich, animated UI. The kind of effects Pasquale D’Silva talks about in his post Transitional Interfaces. These kind of effects show up all the time in native apps, but are much rarer in web apps. It’s not that they’re impossible, frameworks like jQuery Mobile provide them, and people like Chris Coyier and Steve Sanderson have done some heroic work showing how you can roll them yourself.

To me though, it’s still too hard to achieve these kinds of effects. We have primitives like CSS transitions and animations to build with, but using them for complex effects requires building an imperative JavaScript layer on top to orchestrate everything. So, if for example you want to remove an item from a list in an animated way, you have to run the animation via script, detect when it’s finished, then remove the item from the DOM. For the project I’m currently working on, I’ve been doing this using AngularJS, using the animation support just added in v1.4, and some state-management code I’ve developed myself. It works, and it’s looking good, but it’s more work than should be necessary. I think the platform should handle a lot of this for you.

I’d like to see animation hooks built into all parts of the platform, so I can declaratively say: When I navigate via a link, transition between pages like this. When a new DOM node is inserted into a list, animate its entry like this and, when it’s removed, animate its exit like this. It can often be generalised into a matter of saying, when my UI is in state X, and I switch to state Y, transitions my UI elements like this. Building this would require defining the states that are implicit in the UI platform, and the edges between them, then providing a mechanism to control what happens at the edges.

This needs to be done in the layered fashion that Alex Russell and others have been advocating. So we get both low-level, imperative JS APIs that can be used to get fine-grained control and deal with rare use cases, as well as high-level declarative APIs (which can be expressed in terms of the low-level APIs) that let us easily achieve common use cases, like “give me an <ul> with fancy slide-in and slide-out animations when items are added or removed”.

The Web Animations spec is an important first step, as it defines a common model for what we have (CSS animations and transitions, and SVG) that can be used to build other things in a consistent fashion. There’s even an impressive looking prototype/polyfill of the spec available, developed by Google by the looks of it, available to tinker with. However there’s still a lot of work to be done to define other parts of the platform in terms of that model, and to create the declarative APIs that will sit on top of it.  I have some ideas about how those APIs might look, and plan to work up some prototypes of my own, if I get the time.