Pause after loop in TweenJS

Question

I'm hoping that some of you have worked with tween.js (part of the create.js suite of libs).

I have a JS Fiddle to show you my issue: http://jsfiddle.net/qyp8Y/1/

I'm seeing a pause after each 8 step loop, which shouldn't be there.

Can someone have a look at it and tell me what I'm doing wrong?

Thanks!

Answer 1

Sure, lets step though some code:

for (i = 0; i <= 8; i++) {
    t.to({
        rotation: 45 * i
    }, 1000, Ease.elasticOut).wait(200);
}

Here are the values you are creating in that loop:

i : rotation 
0 : 0
1 : 45
2 : 90
3 : 135
4 : 180
5 : 225
6 : 270
7 : 315
8 : 360

Note that for your purposes 0 and 360 are the same value. This means that when the loop starts over from the beginning, it is tweening from 360 to 0 (or nowhere) for one whole second.

Your object starts at rotation 0 and you can't get rid of the tween to 360. You can, though, remove the redundant tween to 0/360 by starting with the tween to 45 (starting i at 1)

That change results in this (note: I also changed the ease so I could see it better):

for (i = 1; i <= 8; i++) {
    t.to({
        rotation: 45 * i
    }, 1000, Ease.quadInOut).wait(200);
}

Of course, the next problem to solve is how to make the gear rotate but not lose the correct lighting/shadow direction as it does. I'll leave that to you.

Update: I found this via the github issue you filed.