An Old Fashioned Animation

Normally, I would do these kinds of things via CSS3, canvas or an SVG, but a recent project needs smooth animation while working on IE7+.

Here is one of the most complicated versions, click play to see it in action

Play

The secret

To make smooth the animation had to be basic. To keep it as simple as possible you'll see this is a set of layered png files all the same size (width of the canvas) with everything in their starting locations.

With each element lined up neatly, all the animation has to do is move them up or down, making it less intensive on the browser.

The painful part of this method is getting the images split in the right places and the masking images cut just right. You can see in the demo the images aren't perfect, but this is only a proof of concept, the final version will be spot on.

For the curious

If you are interested, here are the files used for this:

Javascript CSS

Where?

You can see this and a whole bunch more over at the e-know.net in both the data centre and services sections.

e-know Data centre Services