
Firmin, a JavaScript animation library using CSS transforms and transitions - ionfish
http://extralogical.net/articles/2011-04-04-firmin-javascript-animation/
======
geuis
The text is appreciated, but too long. More importantly, there are no demos.
That text is valuable but should be broken up into smaller sectional chunks,
each associated with code and functional demos

~~~
ionfish
I definitely agree it needs some demos: this is my priority, time permitting.
Thanks for the feedback!

~~~
evo_9
The lack of a demo killed my interest nearly instantly; after hunting around
and spending a few minutes and still nothing buried a level or two deeper,
yeah I shook my head and moved on.

This is an animation library, you should have something on the first page
right at the top, even if it's not a proper 'demo' (something to see/look at
to get a sense of what this is capable of).

~~~
msy
As someone who works with HTML and animation daily I greatly appreciated the
detailed text. This isn't about what is made possible, it's about making it
easier to structure larger and more complex applications that have significant
animation.

~~~
ionfish
Thanks, good to know it was of use. The concern you outline was very much the
one I had in mind when developing Firmin—writing large, UI-intensive web
applications where CSS transforms and transitions would be useful but too
inflexible to use without some mediation through a JavaScript API layer.

------
techtalsky
Looks interesting but I can't figure out why there's no hosted demo. Hard to
be inspired to think of a use case or want to play with it when I can't see a
demo without pulling the code.

~~~
ionfish
Just a lack of time, really. I actually wrote most of the library last summer,
but then I quit my job and went back to university, whereupon my free time
dropped precipitously. I'll see if I can rustle something up this evening.

------
lukifer
I've been wanting something like this, thanks! It can be tedious to set up
animations by hand in the CSS, and since animations have more to do with
behavior than styling, it makes the code a lot cleaner.

A nice-to-have would be detecting the presence of common JS libraries, and
falling back to jQuery/etc DOM-based animation on browsers that do not support
CSS transitions.

~~~
ionfish
Thanks, that's an interesting suggestion. I'll have to think a little about
how it would work in practice—object detection is simple, but I'd need to make
sure I could map the API well enough in each case for it to be worthwhile. If
I did do that, it would probably be as an optional library (specified at build
time), providing a fallback in the same way I intend to provide a fallback for
browsers which don't provide an implementation of CSSMatrix. The other
possibility would be to embed a minimal animation library like Émile [1], and
just use that directly.

The other way of doing this would be to pull Firmin into more general DOM
libraries as an alternative animation backend, and toggle between them based
on runtime feature detection (for an example of how to do this, see [2]). A
special case of that is doing it at the application level, in cases where the
potential performance gains are vital; I mention an instance where I've
actually done this in the article.

[1] <https://github.com/madrobby/emile>

[2]
[https://github.com/othermedia/edgecase/blob/master/source/ed...](https://github.com/othermedia/edgecase/blob/master/source/edge-
gallery.js#L68-89)

------
natmaster
Other than the recently proposed 3D transforms, what's incomplete about
Firefox's 4 implementation?

~~~
ionfish
For one, it doesn't expose (that I can find) an implementation of the
CSSMatrix interface.

