Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. You're using my work every day, even if you're not aware of it (sounds creepy, I know!). Need JS foo? Hire me.

A 50 Lines-of-Code JavaScript Animation Framework: Say Hello to Émile

November 7th, 2009 by Thomas Fuchs, 13 comments »

At my talk at Fronteers, I introduced Émile, a JavaScript animation framework, that’s framework-agnostic, and just takes up about 50 lines of code. With Gzipping, and minification, it’s well under 1k in size. Consider it experimental, but most things you’d ever need are supported, supporting IE6 and up, and modern web browsers (Firefox, Safari, Chrome), of course.

Here’s the source, MIT-licensed and waiting for your patches and comments!

And here’s a Presentation (4MB PDF) about the details of the implementation, also a good starting point if you want to write your own animation framework. Enjoy!

View more documents from Thomas Fuchs.

Post to Twitter Tweet This Post Post to Digg Digg This Post Post to Facebook Share on Facebook

13 comments »

JavaScript Rocks! Peformance ebook
Do you run a web site or web application? Do your users a favor, and grab our ebook on JavaScript performance. Profit from our knowledge gathered in over 15 years of working with the Web and JavaScript and make your sites ultra-fast and your users ultra-happy.

13 Comments on “A 50 Lines-of-Code JavaScript Animation Framework: Say Hello to Émile”

  1. 1 Ron Derksen said at 11:33 am on November 7th, 2009:

    looks good! I’ll have to play around with it sometime soon. Seems very good for when you don’t need alot of effects stuff.

  2. 2 Tim said at 4:26 pm on November 8th, 2009:

    Hi Thomas, some code from emile got me curious.
    Why would you want to split a “static” string at run time in order to get a list of properties ? Is the only reason to save some bytes, as you don’t clutter the code with ’ and , ?
    Readability is improved, but do you consider the cost of parsing this string as insignificant ?

    Just curious :)
    I really like the elegance/performance combo of the emile.js code. Thx for sharing :)

  3. 3 Thomas Fuchs said at 6:01 pm on November 8th, 2009:

    @Tim: the split() is only executed once, so there’s no performance hit, but at the same time it makes the code more readable, shorter and more maintainable

  4. 4 Ajaxian » Émile: Stand-alone CSS animation JavaScript mini-framework said at 12:04 pm on November 9th, 2009:

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

  5. 5 Rasmus Fløe said at 7:18 am on November 10th, 2009:

    I just wrote a comment on Ajaxian when I realised that I should’ve commented here :/

    I won’t duplicate the comment here, but just point out that the hex color parsing bit is broken (the c variable is only declared but never defined) – but the line will only get executed if a browser actually returns a hex color through currentStyle/getComputedStyle… Which probably hasn’t happened in any of your tests. I couldn’t say whether this would ever happen and in what cases – maybe the line is completely redundant? Hooray – then Émile would even shorter! ;)

  6. 6 Hello to Émile – Small JavaScript CSS Animation Framework – Webmove – Daily Web Inspiration and Technology Mashups said at 1:31 pm on November 11th, 2009:

    [...] Thomas Fuchs introduced his new project Émile at JSConf.EU. It is  a JavaScript animation framework, that’s framework-agnostic, and just takes up about 50 lines of code. [...]

  7. 7 Nivanka said at 9:04 am on November 23rd, 2009:

    I have to try it out, the selectors I like it.

  8. 8 javisantana said at 9:21 pm on November 30th, 2009:

    bounce also can be approximated with: (python)

    def bounce(t):
    return 1.0 – (1-t)*(1-t)*abs(cos(4*pi*t));

    very good presentation, thank you.

  9. 9 teylor feliz said at 3:00 am on January 8th, 2010:

    Thanks you very much! I had time looking for a presentation with js Animations.

  10. 10 Arosperpisbub said at 1:15 pm on January 9th, 2010:

    Уважаемые читатели. С Рождеством христовым хочется вас поздравить. Админу сайта отдельное пожелание-побольше читателей на блоге, креативных интересных статей и всего всего всего :)

  11. 11 Arosperpisbub said at 4:40 pm on January 10th, 2010:

    Хороший сайт. Так держать!!!

  12. 12 Émile: Stand-alone CSS animation JavaScript mini-framework - Wasif Hafeez said at 12:32 pm on January 25th, 2010:

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

  13. 13 mir.aculo.us with Thomas Fuchs » Blog Archive » Emile.js talk (video & slides) said at 5:21 pm on January 28th, 2010:

    [...] If you like, grab the slides and the code at my previous post. [...]

Leave a Reply