Search code examples
actionscript-3gsap

How do I overwrite a delay in TweenMax?


I am working in actionscript 3 using a Greensock TweenMax timeline. I have a one page scroller with two buttons (back to the top, and stop/play button). The scroller automatically plays onLoad with a delay of 4 seconds. When I press stop/play button, it doesn't stop the delay. I have to wait the full four seconds before it functions. Also the 4 second delay only happens when the scroller runs for the first time. How can I get the 4 second delay to happen everytime the scroller repeats? How can I get the stop/play button to override the delay and play? I have worked on this for two days, and tried various techniques (for loops, timers, delayed calls, etc.) with no success. If anyone has ideas I will greatly appreciate it.

1) Code that starts the timeline:

myTween = new TweenMax(content_mc, 60, {delay:4, y:22, ease: Power0.easeNone, onComplete: restartFromTop });

2) This function controls the stop/play button

    private function toggler(e:MouseEvent = null):void 
    {           

           if (playState == true){  
           toggleBtn.gotoAndStop(2);
           myTween.pause();
           playState = false;
           trace("MC is now paused and stopped");
        }

           else if(playState == false) {
           myTween.resume();
           toggleBtn.gotoAndStop(1);
           playState = true;
           trace("MC is resumed from pause");  
        }
    }

3) This function controls the restarting of the scroller when it repeats.

private function restartFromTop():void 
        {       
            myTween.restart()
            playState = true;
        }

4) This function controls the back to the top button

private function backToTop(event:MouseEvent):void 
        {
            myTween.reverse();

            if (playState == true){
                myTween.restart();
                myTween.resume();//stop animation
                //toggleBtn.gotoAndStop(2);//changes button to pause
                toggleBtn.buttonMode = true;
                trace("page is scrolling");
            }

            if (playState == false){
                myTween.restart();
                myTween.pause();//stop animation
                trace("play button is paused");
                trace(timer);
            }

//Adds a hand cursor on the button and adds a click event to the button. 
            toggleBtn.buttonMode = true;
            toggleBtn.addEventListener(MouseEvent.CLICK, toggler);
        }

Solution

  • I could not reproduce the first issue you are facing, that is the issue of delay with pause and resume. I tried a simple tween with 4 seconds delay and was able to pause and resume the tween without any delay.

    For the other issue with restart, the TweenMax restart function takes a couple of arguments, and the first one being includeDelay:Boolean which is set to false by default. Setting this property to true fixes the issue.

    Excerpt from the docs :

    includeDelay:Boolean (default = false) — Determines whether or not the delay (if any) is honored when restarting. For example, if a tween has a delay of 1 second, like new TweenLite(mc, 2, {x:100, delay:1}); and then later restart() is called, it will begin immediately, but restart(true) will cause the delay to be honored so that it won't begin for another 1 second.

    Full docs can be found here

    So, the following code should fix your restarting problem:

    myTween.restart(true);
    

    For your first issue, I would recommend you create a minimal scenario to reproduce it, and if it does, please do post a comment on my answer here.

    Hope this helps. Cheers.