var c = document.getElementById("c"), ctx = c.getContext("2d"), maskCanvas = document.createElement("canvas"), maskCtx = maskCanvas.getContext("2d"); var width = document.documentElement.clientWidth var height = document.documentElement.clientHeight orb = new Image(300, 300), img = new Image(height, width) // $("canvas").css({width:height,height:width}) img.src = "img/5.jpg"; orb.src = "img/orb.png"; goanimate() function goanimate(){ cw = (maskCanvas.width = c.width = img.width), ch = (maskCanvas.height = c.height = img.height), console.log(cw, ch); ratio = ch / cw, mainTL = new TimelineMax({ paused: true }), particles = [], Particle = function (index, x, y) { this.x = x; this.y = y; this.draw = function () { maskCtx.translate(this.x, this.y); // maskCtx.globalAlpha = this.progress; maskCtx.drawImage(orb, -this.size / 2, -this.size / 2, this.size, this.size); // maskCtx.globalAlpha = 1; maskCtx.translate(-this.x, -this.y); } mainTL.add(new TimelineMax().fromTo(this, rand(1.1, 2.8), { progress: 0, size: 200, x: "+=" + rand(-50, 50), y: "+=" + rand(-50, 50) }, { x: "+=" + rand(cw / 2, cw), size: 0, progress: 1, ease: Power4.easeIn //ease:Power0.easeNone }), 0); }; // populate particles var pI, pX, pY; for (pX = pI = 0; pX < cw; pX += 100) { for (pY = 0; pY < ch; pY += 100) { pI++; particles.push(new Particle(pI, pX, pY)); } } TweenMax.ticker.addEventListener('tick', updateStage); // redraw canvas upon each 'tick' // c.addEventListener('click', function(e){ mainTL.play(); TweenMax.delayedCall(3, function () { TweenMax.ticker.removeEventListener('tick', updateStage); }); // ...and stop 'tick' updates // }); function updateStage() { console.log('ticking...') //update mask maskCtx.clearRect(0, 0, cw, ch); for (var i = 0; i < particles.length; i++) particles[i].draw(); //update visible canvas ctx.globalCompositeOperation = "source-over"; ctx.clearRect(0, 0, cw, ch); ctx.drawImage(img, 0, 0, cw, ch); ctx.globalCompositeOperation = "destination-in"; ctx.drawImage(maskCanvas, 0, 0); } function doResize() { //proportional scale if (window.innerHeight / window.innerWidth < ratio) TweenMax.set(c, { transformOrigin: '0 0', scale: (window.innerWidth * ratio) / img.height }); else TweenMax.set(c, { transformOrigin: '0 0', scale: (window.innerHeight / ratio) / img.width }); // center positioning var data = c.getBoundingClientRect(); TweenMax.set(c, { x: window.innerWidth / 2 - data.width / 2, y: window.innerHeight / 2 - data.height / 2 }); } // window.addEventListener('resize', doResize); // doResize(); //also called when #container fades in... function rand(min, max) { (min) ? min = min: min = 0; (max) ? max = max: max = 1; return min + (max - min) * Math.random(); } } setTimeout(function () { img.src = "img/6.jpg"; $("canvas").css("background", "url(./img/7.jpg)",); $("canvas").addClass('threeanimate') goanimate() },2600)