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:

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

Nice work Thomas!


Related News :