Sequencer

A tiny JavaScript library to display fullscreen image sequences in the browser.
To keep the library light and simple there are actually 5 different versions
of it plus a benchmark test. They were built to test speed and will eventually
be dropped in future versions in favor of a single one.
The library consists of five files:

1. sequencer.bg.js
   Displays the images as the body background. The images are stretched with
   the CSS “auto”, “cover” and “contain” modes.
   I didn’t find a way to pass an image object to the CSS background so this
   version relies heavily on the browser’s cache.
   → Launch in a new window
2. sequencer.div.js
   Displays the images as a stack of divs hiding and showing the corresponding
   layer. This version relies a bit on the browser cache, but once loaded
   the images are stored as a div background.
   → Launch in a new window
3. sequencer.canvas.js
   Displays the images on a canvas object the size of the browser window.
   The images are preloaded and then stretched and cropped on the canvas.
   → Launch in a new window
4. sequencer.canvas2.js
   Displays the images on a canvas object the size of the first loaded image.
   The canvas is then stretched and positioned correctly via css.
   → Launch in a new window
5. sequencer.canvas.async.js
   Loads the sequence asynchronously.
   It’s a messy work in progress right now, but loading times are 4-5 times faster.
   This will eventually become the final version.
   → Launch in a new window
6. sequencer.benchmark.js
   Image sequencer benchmark.
   Not sure if this is reliable: it looks as though some browsers skip frames
   to keep up with the interval event.

Best results so far on OS X are on Safari with the canvas version.
Firefox is very fast (99.8 fps!) with canvas on small windows sizes (smaller than 1000px wide); becomes very slow with bigger windows. It’s also slow with the background & div versions; slow DOM-manipulation I guess.
Chrome and Opera are surprisingly slow with both the canvas versions.

Some examples using Sequencer:
→ Stopmotion Experiments 1
→ Stopmotion Experiments 2
→ Download from github
→ View on github