Monday, November 9th, 2009

Émile: Stand-alone CSS animation JavaScript mini-framework

Category: JavaScript, Library

<p>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:

  1. <script src="emile.js"></script>
  2.  
  3. <div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
  4. <div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>
  5.  
  6. <script>
  7.   emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
  8.     duration: 500,
  9.     after: function(){
  10.       emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
  11.         duration: 4000, easing: bounce
  12.       });
  13.     }
  14.   });
  15.  
  16.   function bounce(pos) {
  17.     if (pos < (1/2.75)) {
  18.        return (7.5625*pos*pos);
  19.    } else if (pos < (2/2.75)) {
  20.        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
  21.    } else if (pos < (2.5/2.75)) {
  22.        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
  23.    } else {
  24.        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
  25.    }
  26.  }
  27. </script>

Nice work Thomas!

Related Content:

Posted by Dion Almaer at 6:03 am
8 Comments

++---
2 rating from 88 votes

8 Comments »

Comments feed TrackBack URI

examples anywhere … ?

Comment by aurora — November 9, 2009

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

Comment by Kimoja — November 9, 2009

@kimoja see the presentation PDF. It’s pretty self explanatory, If it’s not, maybe this library is not for you.

Comment by SilentLennie — November 9, 2009

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

Comment by rasmusfl0e — November 10, 2009

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.

Comment by jon60 — November 11, 2009

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/

Comment by mattprokes — November 11, 2009

Hmmm, seems you can’t expect people to:

1) read the article
2) read the comments
3) refrain from plugging their own stuff

lol

Comment by rasmusfl0e — November 11, 2009

It base on old technology . still some errors , not perfect

Comment by ducminh — November 22, 2009

Leave a comment

You must be logged in to post a comment.