Animate CC responsive tween problem

[gargara1]

Hi guys I am running in problem when with my slider. I am using Tween Max to tween some MC's into the stage center, which works great except when I rescale the stage and then my mc's are moved to the left. I console logged everything and it is ok, stage center is fine, all is fine, so I am thinking the mc's are the problem.  If anyone can help me with an advice will be very good to know. Here is a link to the slider and some code that I wrote, all critique will be well received :)

 

https://bellavistabulgaria.bg/test/timeline/timeline.html

 

 

 

createjs.Touch.enable(stage);
createjs.Ticker.interval = 10;
window.addEventListener('resize', resizeCanvas1);

 

    this.slider.on("mousedown", onMouseDown.bind(this));
    this.slider.on("pressmove", onMouseMove.bind(this));
    this.slider.on("pressup", onMouseUp.bind(this));

    this.slider.originX = this.slider.x;
    this.slider.originY = this.slider.y;
    var mc = [this.mc0,this.mc1, this.mc2, this.mc3,  this.mc4];
    var boundsYear = [this.year0.nominalBounds, this.year1.nominalBounds, this.year2.nominalBounds, this.year3.nominalBounds , this.year4.nominalBounds];
    var current_mc=this.mc0;
    var previous_mc;
    var next_mc=this.mc1;
    var oldX = 0;
    var currentX = 0;
    var mc_counter = 0;
    var num_mc = 0;
    var enabled = false;
    var stageW = stage.canvas.width;
    TweenLite.to(current_mc, 1, { ease: Power1.easeOut,  alpha:1, x:stageW/2});
    
    this.mc0.gotoAndPlay(1);
    var previous = 0;
    

    var myTimer = setInterval(playNext, 5000);
    

    
        
function resizeCanvas1(){
    stageW = stage.canvas.width;
    boundsmc = [exportRoot.mc0.nominalBounds, exportRoot.mc1.nominalBounds, exportRoot.mc2.nominalBounds, exportRoot.mc3.nominalBounds , exportRoot.mc4.nominalBounds];
}
    

    
function playNext(){
    
    if(num_mc< 4){    
        current_mc  = mc[num_mc];
        previous_mc = mc[num_mc+1];
        TweenLite.to( current_mc, 1, { ease: Power1.easeOut,  alpha:0, x:-(stageW/ 2), onComplete:bringBackFrame1});
        TweenLite.to(previous_mc, 1, { ease: Power1.easeOut,  alpha:1, x:stageW/2 )});
        console.log(stageW/ 2, current_mc.x );
        previous_mc.gotoAndPlay(1);
        TweenLite.to(exportRoot.slider, 1, { ease: Power1.easeOut, x:(exportRoot["year" + numplus].x + (boundsYear[numplus].width/2)) });    
        num_mc++;
        }
}
function onMouseDown(evt){

    clearInterval(myTimer);
    
    var item = evt.currentTarget;
    item.offset = {x:0, y:0};
    var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
    item.offset.x = pt.x - item.x;
    item.offset.y = pt.y - item.y;
    item.drag = true;
}
// mouse up event
function onMouseUp(evt){
    var item = evt.currentTarget;
    item.drag = false;
    myTimer = setInterval(playNext, 5000);
}
// mouse move event
function onMouseMove(evt){
    
    
    var item = evt.currentTarget;
    
    if (item.drag){
        
        var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
        item.x = pt.x - item.offset.x;
        setTimeout(function(){ oldX = exportRoot.slider.x; }, 5);
        currentX = exportRoot.slider.x;
        }
    
    if (oldX < currentX){
        for (var i=1; i<5; i++){
                
            if(item.x > exportRoot["year" +i].x&&item.x < exportRoot["year" + i].x + boundsYear.width){
                previous = i-1;
                current_mc = mc;
                num_mc = i;
                previous_mc = mc[previous];
                PlayForward();
                }    
        }
    }
    else if (oldX > currentX){
        for (var i=1; i<5; i++){
            var previous = i-1;
            if(item.x < exportRoot["year" +i].x&&item.x > exportRoot["year" + previous].x + boundsYear[previous].width ){
                current_mc = mc;
                num_mc = previous;
                previous_mc = mc[previous];
                PlayBackward();
            }    
        }
    }
    
}
    function PlayForward(){
        
        for (var i=num_mc; i>0; i--){
             TweenLite.to(mc, 1, { ease: Power1.easeOut,  alpha:0, x:-(stageW/ 2), onComplete:bringBackFrame});
        }
        if(current_mc.currentFrame==0){
        current_mc.play();    
        }
         TweenLite.to(previous_mc, 1, { ease: Power1.easeOut,  alpha:0, x:-(stageW/ 2), onComplete:bringBackFrame});
         TweenLite.to(current_mc, 1, { ease: Power1.easeOut,  alpha:1, x:stageW / 2 });
} 
    function PlayBackward(){
        for (var i=num_mc; i<5; i++){
            console.log(i);
             TweenLite.to(mc, 1, { ease: Power1.easeOut,  alpha:0, x:(stageW + stageW/ 2), onComplete:bringBackFrame1});
        }
        if(previous_mc.currentFrame==0){
        previous_mc.play();    
        }
        
         TweenLite.to(current_mc, 1, { ease: Power1.easeOut,  alpha:0, x:(stageW + stageW/ 2), onComplete:bringBackFrame1});
         TweenLite.to(previous_mc, 1, { ease: Power1.easeOut,  alpha:1, x:stageW / 2 });
}
    function bringBackFrame(){
        previous_mc.gotoAndStop(0);
    }
    function bringBackFrame1(){
        current_mc.gotoAndStop(0);
    }

[GreenSock]

Welcome to the forums, @gargara1. It looks like there must be something off in the way you're calculating things, but there's too much going on here for me to dissect at the moment. I'd strongly recommend creating the most reduced case possible (literally, like one box that animates to the center...no other assets at all) to isolate things and post that here. A codepen is best. This doesn't really seem like a GSAP-related question, but if we can help we'll try (once you've got a more reduced test case). 

 

FYI, it looks like there are errors being thrown regarding nominalBounds. 

 

 

[gargara1]

Hi guys, so I figured out what is the problem but I am not sure how this can be fixed. So the problem is that when the stage is scaled down, the movie clips nominal bounds are the same as when it is not scaled down , so they don't change accordingly. Do you happened to know how to update the nominal bounds in run time?

[GreenSock]

I'm not familiar with Animate CC, sorry. Maybe ask in the Adobe forums?