I have a problem, and can't tell if this is EaselJS or GSAP, but I think answer can be useful for users of GSAP . I'm loading bunch of images, and then trying to rotate them around center, but sometimes it doesn't work, I mean - they are not rotating around center, but 0,0. I'm not sure what I'm doing wrong, could someone help me?
I'm loading bunch of images like that:
var img_all = 2;
cloud1.src = "/images/cloud1.png";
cloud1.onload = imageLoader(img_all);
cloud1 = new createjs.Bitmap(cloud1);
cloud2.src = "/images/cloud2.png";
cloud2.onload = imageLoader(img_all);
cloud2 = new createjs.Bitmap(cloud2)
And here is my function that tries to set reg. points after all images will be loaded:
var img_comp = 0;
function imageLoader(img_all) {
img_comp++;
if(img_all == img_comp) {
cloud1.y = 350;
cloud2.x = 400;
cloud2.y = 300;
cloud1.regX = cloud1.image.width/2;
cloud1.regY = cloud1.image.height/2;
cloud2.regX = cloud2.image.width/2;
cloud2.regY = cloud2.image.height/2;
TweenMax.to(cloud1, 30, { rotation: 360, repeat: -1, ease: Linear.easeNone });
TweenMax.to(cloud2, 40, { rotation: 360, repeat: -1, ease: Linear.easeNone });
TweenMax.ticker.addEventListener("tick", draw);
}
}
But still sometimes, they are just rotating around 0,0 instead of center, what can be done better?
Regards.