Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mojogar

tweens overlappiing and not finishing

Recommended Posts

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");
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×