Tweening multiple image objects in html5/js

Question

Is there an optimal way to choose when tweening multiple images as a single image?

For example let's say i have 10 preloaded image objects in my script, and i want to place them one on top of the other (the arrangement is supposed to be dynamic), and then tween it as a single "collage".

Do javascript tweening libraries like Tweenjs/GSAP etc, care about how many objects you tween concurrently (as long as in the end they move in the same direction and with same speed), or is it transparent for the fact that the hardware will move an array of pixels in the end?

Do you think that it would be better - performance-wize - to pre-combine the multiple images into one larger image, and then feed it to the tweening algorithm?

I would like to do it this way, as it would be more transparent to me, seperating the image "collage" process from the tweening process, but i haven't found a way to dynamically create javascript image objects by combining multiple single images.

Thank you.

Answer 1

One way you can do this is to draw all the images where you want them onto a new canvas (one which is separate from the main canvas, but positioned absolutely exactly on top of the main canvas). Then you can tween the entire canvas element (not the images on the canvas), keeping the images that were drawn on it as one.

Answer 2

It seems that for TweenJS, there is no performance penalty in tweening multiple image objects.

After contacting CreateJs support, i got extra information on how to do it.

You can group multiple images (createjs.Bitmap objects) using a createjs.Container, and the only performance penalty is the creation of the container object it self.

Hope this helped someone else too.