# Creating looping canvas animation (slot machine with reels)

I have a small assignment to create something like slot machine with spinning pictures. I have to use HTML5 Canvas. I would like to hear some opinions how this can be made simply and performantly.

There are symbols that would be spinning vertically while only 2 would be fully visible, next 2 are partially hidden and remaining 2 are not visible at all.

I have chosen CreateJS suite, but I have no experience with that, so I am just trying to figure it out. I made this for the start...

var reels = [160, 405, 648, 892, 1137]; // X offset of reels
var reelLines = [0, 317, 634]; // Y offset of symbols in the reel

var stage = new createjs.Stage('game');

for (x = 0; x < reels.length; x++) {
for (y = 0, y < reelLines.length; y++) {
bmp = new createjs.Bitmap('symbol').set({
x: reels[x],
y: reelLines[y]
});
}
}


This displays 3 symbols in each reel and it looks good. Now I need to add some animation to it. I am thinking about it like having stack of symbol bitmaps at the top position where it's not visible yet. I tried to use Tween class like this.

createjs.Tween.get(bmp, {loop: true}).to({
y: 808
}, 500);


It's basically correct, symbol rolls in and out and then it pops at top again. However this works for single symbol only. If I position three symbols as stated above and run same tween on them, each of them will go in different speed, because to call second argument is duration, not the speed.

I would really appreciate some ideas on this approach and if it's even correct one.

var diff = 808 - bmp.y;