Hi, here is my code. At the moment, all the balls fall at the same time, with no delay inbetween them. It appears the 0.25 stagger is ignored – I realise that the value of ypos is being passed to the function 'loop', and so the value will be fixed. However I am able to use the same 'timeline.staggerTo' code, outside of canvas, and get the required stagger effect (without having to use the 'drawImage' command):
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 with TweenMax</title> <script src="js/TweenMax.min.js"></script> <style type="text/css" media="screen"> html, body { height:100%; background-color: #ffffff;} body { display:block; margin:0; padding:0; overflow:hidden; } #canvas { display:block; width:800px; height:600px; margin:0px auto; background:#000000; position:relative } </style> <script> var ctx, img; function init() { ctx = document.getElementById("canvas").getContext("2d"); var timeline = new TimelineMax(); img = new Image(); img2 = new Image(); img3 = new Image(); img4 = new Image(); img5 = new Image(); img6 = new Image(); img7 = new Image(); img.src = "ball.png"; img2.src = "ball2.png"; img3.src = "ball3.png"; img4.src = "ball4.png"; img5.src = "ball5.png"; img6.src = "ball6.png"; img7.src = "ball7.png"; var clips1 = [img, img2, img3, img4, img5, img6, img7]; img.xpos = 0; img.ypos = -113; img.onload = function() { TweenLite.ticker.addEventListener("tick", loop); } timeline.staggerTo(clips1, 1, {ypos:490, ease:Bounce.easeOut, onUpdate:loop}, 0.25); } function loop() { ctx.clearRect (0,0,800,600); ctx.drawImage (img, 0, img.ypos); ctx.drawImage (img2, 113, img.ypos); ctx.drawImage (img3, 226, img.ypos); ctx.drawImage (img4, 339, img.ypos); ctx.drawImage (img5, 452, img.ypos); ctx.drawImage (img6, 565, img.ypos); ctx.drawImage (img7, 678, img.ypos); console.log("looping"); } </script> </head> <body onload="init()"> <canvas id="canvas" width="800" height="600" style="background-color: #223456; z-index:0"> Canvas is not supported. </canvas> </body> </html>