Monday, November 9th, 2009
Émile: Stand-alone CSS animation JavaScript mini-framework
Category: JavaScript, Library
É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:
- <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>
- <script>
- 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!
Related Content:
2 rating from 83 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