Hello, Gifler!

Getting started is easy! Just call the gifler function to load a GIF. Then run the animation in a canvas using the .animate() method. The method .animate() accepts a canvas DOM element or a string selector to a canvas element.

gifler('assets/gif/run.gif').animate('canvas.running-pikachu')

Custom Rendering

Gifler makes it easy to manipulate the underlying frames from the GIF. Just call the .frames() method with a canvas selector and a callback that will be called when each frame should be renderd. Gifler handles all the timing calculations and GIF transition logic. Just put the pixels you want to see into the canvas.

var frames = 0;

function onDrawFrame(ctx, frame) {
  // Match width/height to remove distortion
  ctx.canvas.width  = ctx.canvas.offsetWidth;
  ctx.canvas.height = ctx.canvas.offsetHeight;

  // Determine how many pikachus will fit on screen
  var n = Math.floor((ctx.canvas.width)/150)

  for(var x = 0; x < n; x++) {
    // Draw a pikachu
    var left = x * 150;
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(frame.buffer, frame.x + left, frame.y, 150, 100);

    // Composite a color
    var hue = (frames * 10 + x * 50) % 360;
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';
    ctx.fillRect(left, 0, 150, this.height);
  }
  frames++;
}

// Load the GIF, set custom frame render function
gifler('assets/gif/run.gif')
  .frames('canvas.rainbow-pikachus', onDrawFrame);

Play/Pause Control

With access to Gifler''s animator, you can stop and start the animation with ease. When running, the animator will automatically compensate for canvas render time when computing when to draw the next GIF frame.

Try clicking the animation below to start/stop it.

gifler('assets/gif/run.gif')
  .animate('canvas.play-pause')
  .then(function(animator) {
    $('canvas.play-pause').click(function(){
      if(animator.running()){
        animator.stop();
      } else {
        animator.start();
      }
    });
  });

Gifler

Render GIF frames to <canvas>

Hello, Gifler!

Custom Rendering

Play/Pause Control