Basic usage

          $(function () {
            $(".basic-usage").imagesequence({
              src: 'anim_a.jpg',
              width: 1280,
              height: 720,
              loop: true,
              autoplay: true
            });
          });
        

Rewind

          $(function () {
            $(".rewind").imagesequence({
              src: 'anim_a.jpg',
              width: 1280,
              height: 720,
              rewind: true,
              loop: true,
              autoplay: true
            });
          });
        

Controls

          $(function () {
            var imagesequence = $(".controls").imagesequence({
              src: 'anim_a.jpg',
              width: 1280,
              height: 720
            });
            $('.play').on('click', function(){
              imagesequence.play();
            });
            $('.pause').on('click', function(){
              imagesequence.pause();
            });
            $('.rewind-button').on('click', function(){
              imagesequence.rewind();
            });
          });
        

Events

          $(function () {
            var imagesequenceevent = $("#events").imagesequence({
              src: 'anim_a.jpg',
              width: 1280,
              height: 720,
              autoplay: true,
              loop: true,
              afterAnimation: function(){
                console.log('end of animation');
              }
            });
          });
        

Image sequence

          $(function () {
            $(".example-image-sequence").imagesequence({
              path: 'sequence',
              extension: '.jpg',
              indexFrom: 1,
              indexTo: 122,
              loop: false,
              autoplay: false
            });
          });
        

NB

Importing a huge sequenced jpg or png probably won't work. The image generated on our side is more than 600.000 pixels long. Even Photoshop won't import it (max Photoshop size: 300.000px).

Images broken down to slices (these slices will be merged some more - to have six overall and not twelve) and we'll define breakpoints/divs for each slice, positioned absolutely with different z-indexes.

That's the idea for now.