The Animated Quest on the Web

Okay, animations on web is hard. Flash is proprietary. Neither do I own Adobe Flash neither do I wish to learn ActionScript at the moment. Doing animations from scratch on your own using plain JavaScript is tricky. My requirements are simple: I want to move clouds, slowly and elegantly.


There are many open ways to accomplish animations on web these days:

  1. Animate on element CSS properties using JS. You can use Jquery animate or its equivalent in those dozens of JS libraries.
  2. Use CSS3 transitions: they are prettier but they are new and not as ubiquitous as the first option.
  3. Raphaël.js: Oh good lord. I love this library! It uses SVG animations.
  4. Canvas! Okay doing this is not as easy as any of others. Where nothing else works, this will.

My problem: I want slow animations. This means that Option 1 and Option 3 cannot be used. For translation, these solutions use positions. Unfortunately, browsers require them to snap the values to nearest integers. This results in jerky movements, especially for cases like mine, I am moving an element 300 pixels in 60 seconds. That’s way to slow for these kind of solutions. Here is an example of the jerky movements.

Well, this leaves me with two choices: CSS3 transitions and Canvas. Both do subpixel animations. Results, I will post as soon as I have some.

So, what do you think ?