How to pause main timeline?

[sounddevisor]

Hi -

 

In a banner I'm working on, I have a secondary timeline which controls an object sliding up and down on my screen. The secondary timeline works properly, but I'd also like to be able to pause the main timeline when the secondary object slides up on the screen, and then resume playback of the main timeline once my object slides out of view.

 

Here's my current code:

 

<script>

var tl = new TimelineLite();
tl.add( TweenLite.to("#studyDescription", 1, {top:20}));
tl.to("bgMask", .5, {autoAlpha:1});
tl.pause();

var button = document.getElementById("openButton");

button.onclick = slideStudyUp;
if (button.captureEvents) button.captureEvents(Event.CLICK);

function slideStudyUp(){
    tl.play();
}

var closeButton = document.getElementById("closeButton");

closeButton.onclick = slideStudyDown;
if (closeButton.captureEvents) closeButton.captureEvents(Event.CLICK);

function slideStudyDown(){
    tl.reverse();
}

</script>

 

I'm pretty sure that I just need to add something like "main timeline.pause()" to my slideStudyUp function, and "main timeline.play()" to my slideStudyDown function - but what's the correct way to reference the main timeline?

 

Thanks!

[Jonathan]

Hello sounddevisor, and Welcome to the GreenSock Forums!

 

Your code looks like its using the right syntax to pause the timeline.
 

But I see that you created a timeline instance with the variable tl ...  But I only see one Timeline referenced in your code above, and not the secondary Timeline.

 

Do you mind posting the HTML code and secondary Timeline as well for context.. or better yet..

 

Here is a link to a video tut made by GreenSock on how to create a codepen demo example:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks

[sounddevisor]

Hello sounddevisor, and Welcome to the GreenSock Forums!

 

Your code looks like its using the right syntax to pause the timeline.

 

But I see that you created a timeline instance with the variable tl ...  But I only see one Timeline referenced in your code above, and not the secondary Timeline.

 

Do you mind posting the HTML code and secondary Timeline as well for context.. or better yet..

 

Here is a link to a video tut made by GreenSock on how to create a codepen demo example:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks

 

Jonathan -

 

Thanks for your quick reply!

 

My apologies for not explaining clearly enough - the code I posted IS the secondary timeline. The "main" timeline looks like this:

 

<script>

var timerOne = setTimeout(firstMove, 1500);

 

function firstMove(){

 

    TweenLite.to("#woman", 1.5, {left:-80, ease:Quad.easeOut});

    TweenLite.to("#Text01", 1, {autoAlpha:1, delay:1.2});

    TweenLite.to("#studyMask", 1, {autoAlpha:1, delay:1.2});

    TweenLite.to("#closeButton", 1, {autoAlpha:1, delay:1.2});

    TweenLite.to("#openButton", 1, {autoAlpha:1, delay:1.2});

    

}

 

var timerTwo = setTimeout(secondAnimation, 6000);

 

function secondAnimation(){

    

        TweenLite.to("#woman", 1.2, {autoAlpha:0});

        TweenLite.to("#Text01", 1.2, {autoAlpha:0});

        TweenLite.to("#Text02", 1.2, {autoAlpha:1, delay: 1.2});

}

 

etc.

etc.

</script>

 

So, I have a series of timers, each of which launches a block of animations. These timers drive the primary animation of the banner.

 

The secondary timeline ("tl" in the code I posted above) allows the viwer to open (and close) a sliding "drawer" that provides additional information. As is stands, the timeline works correctly, and the "drawer" slides up and down as intended.

 

The problem is that the main animation conintues in the background, which is both distracting, and since the banner does not loop, it means the viewer will miss some of the content. So I want to pause the main animation whenever the drawer is open.

 

I tried adding a line to my function slideStudyUp, so that it reads:

 

function slideStudyUp(){

    tl.play();

    timeline.pause();

}

 

It looks correct to me in terms of syntax, but it doesn't work.

 

Could the problem be that I don't really HAVE a "main" timeline? I didn't create one using TimelineLite, I just created a series of JavaScript timers to launch my animation functions. Would this work better if I wrap the main animation in it's own timeline?

 

Thanks so much for any help!

 

 

[Jonathan]

Yes it would work better if you create the main timeline with GSAP. This way, GSAP can keep track of your timeline and tween changes. GSAP allows you to nest timelines within each other too. So having GSAP control and manipulate your timeline and tweens is very powerful.

 

TimelineLite Docs

TimelineMax Docs

 

The setTimeout() equivalent in GSAP is delayedCall()

 

Taken from Docs:

//calls myFunction after 1 second and passes 2 parameters:
TweenMax.delayedCall(1, myFunction, ["param1", 2]);
         
function myFunction(param1, param2) {
    //do stuff
}

To better help you .. if you can please provide a limited codepen demo example showing the issue. It will help us a long way in seeing your code in context with all the JS, CSS, and HTML.

 

Link by GreenSock on How to create a codepen demo example.

 

Thanks!