Firmin, a JavaScript animation library using CSS transforms and transitions

http://extralogical.net/articles/2011-04-04-firmin-javascript-animation/

by ionfish • 15 years ago

43 11 15 years ago

techtalsky• 15 years ago

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.

ionfish5• 15 years ago

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.

geuis• 15 years ago

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

ionfish5• 15 years ago

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

evo_9• 15 years ago

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).

lukifer• 15 years ago

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.

ionfish5• 15 years ago

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...

natmaster• 15 years ago

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

ionfish5• 15 years ago

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

Firmin, a JavaScript animation library using CSS transforms and transitions

Related Stories