staggerTo with drawImage in Javascript

MikeB1 · March 25, 2014

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?

Carl · March 25, 2014

Hi and welcome to the GreenSock forums,

Tough to say without seeing what you're doing, a basic demo will go a long way:

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

When you change properties of canvas elements you need to redraw the canvas after each update. Watch this video around the 17min mark: http://www.gotoandlearn.com/play.php?id=161 to see how to handle this via the TweenLite.ticker

MikeB1 · March 26, 2014

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>

Carl · March 26, 2014

a few things:

1: You are calling loop() function both with the ticker and on every individual tween generated by staggerTo(). This probably isn't the cause of your problem, but could lead to poor performance.

TweenLite.ticker.addEventListener("tick", loop); should suffice.

2: you are assigning the same y value to each image:

ctx.drawImage (img2, 113, img.ypos);

ctx.drawImage (img3, 226, img.ypos);

ctx.drawImage (img4, 339, img.ypos);

So even though each staggerTo tween is doing its job, you're running code that makes each object animate the same values at the same time

I think you should do something more like this

ctx.drawImage (img2, 113, img2.ypos);

ctx.drawImage (img3, 226, img3.ypos);

ctx.drawImage (img4, 339, img4.ypos);

3: If you need more help, please create a simple demo that we can test, edit and share as mentioned previously:

MikeB1 · March 27, 2014

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.

MikeB1 · March 27, 2014

Hi,

Here is the correct Codepen link:

See the Pen IsCHJ by anon (@anon) on CodePen

Carl · March 27, 2014

Thanks so much for the CodePen demo. Very helpful.

To make your timeline repeat, you need to use TimelineMax instead of TimelineLite

http://codepen.io/GreenSock/pen/lHfiC

As far as using staggerTo() in the timeline, take a look here:

http://codepen.io/GreenSock/pen/uDvmK/?editors=001

MikeB1 · March 27, 2014

That works brilliantly!

Awesome! Many many thanks for your assistance with this. It's much appreciated.

Thankyou,

Mike.

Notifications

Messages

staggerTo with drawImage in Javascript

Warning: Please note

Recommended Posts

MikeB1

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

MikeB1

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

MikeB1

Link to comment

Share on other sites

MikeB1

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

MikeB1

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members