tweens overlappiing and not finishing

[mojogar 0 Likes (Newbie)]

I have a sequence of tweens that take place on mouse hovers. Sometimes the tweens dont finish and are left at half of there tweening. I was looking for some input to remedy this, as I would like to actually slow down the tweens and not have them interfere with each other.

this can be seen at www.mojogar.com

 

var timeDesign:TimelineMax = new TimelineMax();

timeDesign.pause();
timeDesign.insert(TweenMax.to(statement, .1 , {x:"-490", ease:Cubic.easeInOut}));
timeDesign.insert(TweenMax.to(anim, .1 , {blurFilter:{blurX:5, blurY:5, quality:3}, alpha:.2, ease:Cubic.easeInOut}));
timeDesign.insert(TweenMax.to(support, .1 , {blurFilter:{blurX:5, blurY:5, quality:3}, alpha:.2, ease:Cubic.easeInOut}));
timeDesign.insert(TweenMax.to(inovate, .1 , {x:"-580", ease:Cubic.easeInOut}));
timeDesign.insert(TweenMax.to(webSite, .1 , {x:"-480", ease:Cubic.easeInOut}));
timeDesign.insert(TweenMax.to(greenCircle, .1 , { y:"-215", ease:Cubic.easeInOut}));
timeDesign.insert(TweenMax.to(orangeStar, .1 , { y:"-215", ease:Cubic.easeInOut}));

design.addEventListener(MouseEvent.ROLL_OVER, designGo);
design.addEventListener(MouseEvent.ROLL_OUT, designOut);

function designGo(event:MouseEvent):void {
timeDesign.gotoAndPlay("designZero");
}

function designOut(event:MouseEvent):void {
timeDesign.reverse();
}

var timeAnim:TimelineMax = new TimelineMax();

timeAnim.pause();
timeAnim.insert(TweenMax.to(statement, .1 , { x:"-490", ease:Cubic.easeInOut}));
timeAnim.insert(TweenMax.to(design, .1 , {blurFilter:{blurX:5, blurY:5, quality:3}, alpha:.2, ease:Cubic.easeInOut}));
timeAnim.insert(TweenMax.to(support, .1 , {blurFilter:{blurX:5, blurY:5, quality:3}, alpha:.2, ease:Cubic.easeInOut}));
timeAnim.insert(TweenMax.to(flashSymbol, .1 , { y:"-215", ease:Cubic.easeInOut}));
timeAnim.insert(TweenMax.to(blender, .1 , { y:"-215", ease:Cubic.easeInOut}));
timeAnim.insert(TweenMax.to(animInfo, .1 , { x:"-778", ease:Cubic.easeInOut}));
timeAnim.insert(TweenMax.to(walker, .1 , { x:"285", ease:Cubic.easeInOut}));
timeAnim.insert(TweenMax.to(girl, .1 , { x:"-255", ease:Cubic.easeInOut}));

anim.addEventListener(MouseEvent.ROLL_OVER, animGo);
anim.addEventListener(MouseEvent.ROLL_OUT, animOut);

function animGo(event:MouseEvent):void {
timeAnim.gotoAndPlay("animZero");
}

function animOut(event:MouseEvent):void {
timeAnim.reverse();
}

var timeSupport:TimelineMax = new TimelineMax();

timeSupport.pause();
//timeSupport.insert(TweenMax.to(statement, .1 , {x:"-490", ease:Cubic.easeInOut}));
timeSupport.insert(TweenMax.to(design, .1 , {blurFilter:{blurX:5, blurY:5, quality:3}, alpha:.2, ease:Cubic.easeInOut}));
timeSupport.insert(TweenMax.to(anim, .1 , {blurFilter:{blurX:5, blurY:5, quality:3}, alpha:.2, ease:Cubic.easeInOut}));
timeSupport.insert(TweenMax.to(compRepair, .1 , {x:"-800", ease:Cubic.easeInOut}));
timeSupport.insert(TweenMax.to(girlComp, .1 , {x:"430", ease:Cubic.easeInOut}));

timeSupport.addLabel("supportZero", 0);
timeDesign.addLabel("designZero", 0);
timeAnim.addLabel("animZero", 0);

support.addEventListener(MouseEvent.ROLL_OVER, supportGo);
support.addEventListener(MouseEvent.ROLL_OUT, supportOut);

function supportGo(event:MouseEvent):void {
timeSupport.gotoAndPlay("supportZero");
}

function supportOut(event:MouseEvent):void {
timeSupport.reverse();
}


support.addEventListener(MouseEvent.CLICK, mouseClick);
function mouseClick(event:MouseEvent):void {
navigateToURL(new URLRequest("support.aspx"), "_self");
}

anim.addEventListener(MouseEvent.CLICK, Click);
function Click(event:MouseEvent):void {
navigateToURL(new URLRequest("animation.aspx"), "_self");
}

design.addEventListener(MouseEvent.CLICK, mouseHandler);
function mouseHandler(event:MouseEvent):void {
navigateToURL(new URLRequest("art.aspx"), "_self");
}

[GreenSock 18,878 Likes (Superhero)]

One problem I see right away is that your code doesn't protect against conflicting tweens overlapping. In other words, if I roll over the "design" button and then quickly roll over the "anim" button - both spawn timelines that are trying to control the statement object's position, for example. What are you expecting to happen? You should stop() or pause() one timeline before you play() or resume() or gotoAndPlay() the other. If you want one to finish first before the other is allowed to begin, you could always set up a queue system in your code or use delays, etc.

 

Also, you don't need to put labels at the zero position - you could simply call restart() instead of gotoAndPlay("designZero") for example.