GIFS WIP : ANIMATING IN ONE CIRCLE

this is the single image version so ajax yet..

by Nick Hulea

HTML

<script src="http://hulea.org/gifs_try/js/gif.js"></script>
<canvas id="canvas1" style="z-index:1;"></canvas>

CSS

canvas {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
html {
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
var mx = 0,
    my = 0;
var animloop, tryToLoadNextImage, giframe, urls;
can.width = window.innerWidth;
can.height = window.innerHeight;
w = window.innerWidth;
h = window.innerHeight;
var img = new Image();
img.onload = function () {};
img.src = "http://placekitten.com/500/500";

animloop = function () {
    requestAnimFrame(animloop);
};

gif = GIF('http://i.imgur.com/P3VmNwy.gif');
gif.on("rendered", animloop);
gif.render();

can.addEventListener("mousemove", function (e) {
    var mouse = {
        x: e.pageX,
        y: e.pageY
    };
    redraw(mouse);
}, false);

function redraw(mouse) {
    ctx.save();
    ctx.beginPath();
    animloop = function () {
        requestAnimFrame(animloop);
        ctx.arc(mouse.x, mouse.y, 100, 0, Math.PI * 2, true);
        ctx.clip();
        ctx.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, w, h);
        ctx.restore();
    };
}

requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
        return window.setTimeout(callback, 1000 / 60);
    };
})();