Jump to content
Search Community

MikeB1

Members

  • Posts

    5

  • Joined

  • Last visited

MikeB1's Achievements

0

Reputation

  1. MikeB1
    That works brilliantly! Awesome! Many many thanks for your assistance with this. It's much appreciated. Thankyou, Mike.
  2. MikeB1
    Hi, Here is the correct Codepen link: http://codepen.io/anon/pen/IsCHJ/
  3. MikeB1
    Codepen link is on next post (apologies). All seems to run ok EXCEPT: 1. {repeat:-1} on the timeline declaration has no effect. The loop() continues after the animation completed, but nothing animates. 2. {yoyo: true} is not working either. 3. Is this the most efficient way of doing this? - by joining the 7 '.to' statements into one command? This I ask, as I know that outside of Canvas, I can get the same result using staggerTo and only 2 lines of code. Many thanks for your help with this.
  4. MikeB1
    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>
  5. MikeB1
    Hi. I am trying to use the staggerTo function with a delay between objects (png images) that are held in an array. I have come across the problem that, although I can create a staggerTo function, it is not working with the drawImage command in Javascript. My function basically tweens to a Y value, to make an object move down the screen, but I have multiple objects in the array and require a stagger delay between each animation. This works fine outside of the canvas, but when I use HTML5 canvas it seems I *have to* use the drawImage command, which ignores any delay i set in staggerTo. Has anyone else come across this, and does anyone know a workaround?
×
×
  • Create New...