For a Time Machine-like effect, which of CSS3 Animations, SVG or Canvas will perform best?

Question

For our website, we are developing a "component" that would display images in a similar fashion to Time Machine on Mac OS X. So it will be many images on top of each other, positioned slightly differently and with a smooth animation as you scroll forward and backward.

We have a spike implementation with CSS3 animations but it's not very smooth in Firefox and IE9 is not supported at all (though we may live with it if the other options are even worse).

We are considering implementation in SVG or Canvas but don't have much experience with it so I thought we'd ask first. So:

Requirements:

1. It must be fast. The animation must be smooth and that is a hard requirement.
2. It should be supported in as many browsers as possible.
   • Required browsers are Chrome 20+, Firefox 14+ and IE10+.
   • We would very much like to have support for IE9 too but can live without it if absolutely necessary.
   • Opera is nice to have but not necessary.

Options and our current experience / opinion on them:

• CSS3 - seems like the "appropriate" technology for the task but unfortunately the implementation doesn't work so well. Maybe we have inefficiencies in our prototype code but the support seems quite different between different browsers at the moment.
• SVG - at least it's vector graphics / DOM elements but we don't have any experience with it.
• Canvas - we hope that it should perform well as it is used even for games but we can't quite imagine how would all the pixel redrawing work. Maybe we should use some libraries like processingjs?
• Flash or other plugins - I happen to know Flash quite well and I know that the Time Machine-like effect would be quite an easy task there but we'd rather stay away from plugins at the moment.

Thanks for advice.

Answer 1

If the size of the component does not have to be very large, but can be limited to say around 800x600 pixels, then it sounds like Canvas should be up to the job.

If you only draw (scaled) bitmaps to the Canvas then performance is very good in my experience, even on iPad2. Performance only really starts to suffer at higher resolutions (1920x1080 and above), so if you use it for a fullscreen feature you need to watch out! Also, fancy features such as drop shadow etc. can slow down performance considerably as well.

Canvas has very few quirks between browsers, so it will almost certainly be less painful than using CSS3 or SVG in terms of getting it to work as expected across a wide range of browsers.

I would recommend whipping together a quick and dirty prototype with Canvas to see if it will meet your first requirement regarding performance.

If you decide to go with Canvas, I would definitely recommend using a library. Since you know Flash quite well you might want to take a look at EaselJS. It has a display list inspired by Flash, and the performance cost of using it is negligible in most cases. You also get basic events for interactivity. Also, if you go with EaselJS, it would be quite simple to port the code to Flash later if you decide to.

Answer 2

Are you looking for something like this? It uses SMIL animation so you'd have to integrate something like fakesmile to get IE support.