Databases
StackOverflow2013
Postsdbo
POFor a Time Machine-like effect, which of CSS3 Animations, SVG or Canvas will perform best?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFor a Time Machine-like effect, which of CSS3 Animations, SVG or Canvas will perform best?
    text
    copied!<p>For our website, we are developing a "component" that would display images in a similar fashion to <strong><a href="http://www.chicagonow.com/booth-reviews/files/2011/12/time-machine.jpeg" rel="nofollow">Time Machine</a></strong> 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.</p> <p>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).</p> <p>We are considering implementation in SVG or Canvas but don't have much experience with it so I thought we'd ask first. So:</p> <p><strong>Requirements:</strong></p> <ol> <li><strong>It must be fast</strong>. The animation must be smooth and that is a hard requirement.</li> <li>It should be supported in as many browsers as possible. <ul> <li>Required browsers are Chrome 20+, Firefox 14+ and IE10+.</li> <li>We would very much like to have support for IE9 too but can live without it if absolutely necessary.</li> <li>Opera is nice to have but not necessary.</li> </ul></li> </ol> <p><strong>Options</strong> and our current experience / opinion on them:</p> <ul> <li><strong>CSS3</strong> - 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.</li> <li><strong>SVG</strong> - at least it's vector graphics / DOM elements but we don't have any experience with it.</li> <li><strong>Canvas</strong> - 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 <a href="http://processingjs.org" rel="nofollow">processingjs</a>?</li> <li><strong>Flash</strong> 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.</li> </ul> <p>Thanks for advice.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload