Monday, November 9th, 2009
Émile: Stand-alone CSS animation JavaScript mini-framework
Category: JavaScript
, Library
I am sitting next to Thomas Fuchs at JSConf.EU and he just posted about his new library agnostic CSS animation framework called Émile (named after Émile Cohl, an early animator).
Émile has a full set of CSS properties for animation (length-based and colors) and includes easing and callbacks all with less than 50 lines of code!
Check out an example:
HTML:
-
-
<script src="emile.js"></script>
-
-
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
-
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>
-
-
emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
-
duration: 500,
-
after: function(){
-
emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
-
duration: 4000, easing: bounce
-
});
-
}
-
});
-
-
function bounce(pos) {
-
if (pos <(1/2.75)) {
-
return (7.5625*pos*pos);
-
} else if (pos <(2/2.75)) {
-
return (7.5625*(pos-=(1.5/2.75))*pos + .75);
-
} else if (pos <(2.5/2.75)) {
-
return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
-
} else {
-
return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
-
}
-
}
-
</script>
-
Nice work Thomas!
1.9 rating from 80 votes
examples anywhere … ?
I like the concept.
Useful for those who want nothing superfluous in their script (not like a framwork …), the code is simple and easily editable.
gg ;)
@kimoja see the presentation PDF. It’s pretty self explanatory, If it’s not, maybe this library is not for you.
I love this kind of minimalism. A lot of goodness packed into so little code.
But a couple of things that seem odd:
In the color function in part that is supposed to handle hex color codes – the c variable is only declared but never defined. That means the following line will fail:
... while(j--) v.push(parseInt(c.substr(1+j*2,2), 16));
…But the line will only ever be executed if a browser returns a hex color value through getComputedStyle/currentStyle – maybe the line is redundant?
And the following would be shorter and equally valid I think(?):
... comp = el.currentStyle || getComputedStyle(el, null),
instead of:
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null),
Finally opacity isn’t supported by IE – vanilla flavour anyways – so leaving it in might as well open up to rgba colors? (Supported by roughly the same browsers).
Just my 2 cents ;P
IE7 chokes on
v.push(parseInt(c.substr(1+j*2,2), 16))in the color function as c does not get defined when processing colors like “#ffff99″.Changing this to
v.push(parseInt(arguments[i].substr(1+j*2,2), 16))looks to resolve this issue.Been there, done that (even better then whats here)…. http://mattprokes.com/2009/02/08/how-to-extend-css-add-custom-css-configuration-to-your-webapp-cssplusplusjs/
Hmmm, seems you can’t expect people to:
1) read the article
2) read the comments
3) refrain from plugging their own stuff
lol
It base on old technology . still some errors , not perfect