Working with .isActive() on restart

[TartufoDAlba]

My goal of this pen, is to make it so that you can continue to "open and close the menu". Where each action (open/close) has to wait for the other timeline to finish before it can start again.

 

My issue is I understand that after ".play()" the timeline is at the ending, leaving no timeline to restart. But if i use ".restart()" in these instances, it just restarts the first timeline.

 

Any help would be most appreciated.

See the Pen GExeJQ by tartufodalba (@tartufodalba) on CodePen.

[TartufoDAlba]

I was able to put something together without using .isActive(), I may not have been using it correctly. I have updated my "solution" here if anyone stumbles up it.

 

See the Pen GExagq?editors=1111 by tartufodalba (@tartufodalba) on CodePen.

 

[mikel]

Hi TartufoDAlba,

 

to toggle your menu by GreenSock could be easy and clean:

 

See the Pen jwzoBx by mikeK (@mikeK) on CodePen.

 

 

Look at the docs: https://greensock.com/docs/TimelineMax/reverse()

[TartufoDAlba]

7 minutes ago, mikel said:

Hi TartufoDAlba,

 

to toggle your menu by GreenSock could be easy and clean:

 

See the Pen jwzoBx by mikeK (@mikeK) on CodePen.

 

 

Look at the docs: https://greensock.com/docs/TimelineMax/reverse()

 

Thank you for the input and nice clean example, I am aware that you're able to reverse it much cleaner. In my broken down codepen I indeed see how it could suggest that "reverse" would be a workable method for what I'm trying to achieve there.

 

But in my full site I literally have 2 fully separated timelines... both of which are very different and timeline2 not being the reverse of  timeline1.

 

That is why it is important that they are able to fire separately, not in reverse nor "on top" of each other.

[mikel]

Hi TartufoDAlba,

 

If you make a short demo with separated timelines showing what your purpose is I´ll have a look.

[TartufoDAlba]

13 minutes ago, mikel said:

Hi TartufoDAlba,

 

If you make a short demo with separated timelines showing what your purpose is I´ll have a look.

Thank you, overall the 2nd pen I posted (linked again), shows the basic behavior which intertwines with the 1st post. I'm not to sure if there is a cleaner way to do it. In the pen i provided you will see if you continue to click "play-me" it disables the click until the opposite timeline completes. This is the goal:

 

- Button "play-me" shares 2 timelines

1. Click button "play-me" to play "timeline 1" (box height)

2. Disable button "play-me" until "timeline 1"  is finished

3. Re-Enable button "play-me" when timeline 1  is finished

4. Click button "play-me" to play "timeline 2" (make box red)

5. Disable button "play-me" until "timeline 2"  is finished

6. Re-Enable button "play-me" when timeline 2  is finished

and so on in a loop

 

The point being, not allow the other timeline to play on click until the opposite timeline is finished.

 

See the Pen GExagq by tartufodalba (@tartufodalba) on CodePen.

 

[mikel]

Hi TartufoDAlba,

 

Sorry - that´s a case for an expert ... I´m not so fit.

[mikel]

Hi TartufoDAlba,

 

I couldn´t handle it with isActive.

 

So I did it step by step with an animation flag - see console:

 

See the Pen JJLgdL by mikeK (@mikeK) on CodePen.

 

 

With one timeline and labels you could handle all your 'sequences'.

If you have a lot sequences you can handle it by .getLabelAfter() and .play(label).

 

I hope this is helpful ...

 

[Carl]

Manfred, clever approach by using one timeline. It seems to work very well. There are definitely multiple ways to get the result Tartufo needs. 

 

I took another approach to making sure only 1 animation could play at a time and you could cycle through them:

 

• I created 2 timelines and put them in an array
• pressing the button always restarts() the next timeline in the array. if you are at the end of the array, the next timeline will be the first
• when the button is pressed it is disabled by hidding it
• when the current timeline is done the button is re-enabled

 

The trick to playing the next item in the array is to use a little variable that gets incremented on each click and forced to be a value of either 0 or 1 using the following modulus code:
 

open.to($(".menu"), 1.3, {height: "250", background: "blue", ease: Power0.easeNone});
close.to($(".menu"), 1.3, {height: "0", backgroundColor: "red", ease: Power0.easeNone});

var animations = [open, close];

button.click(function(){
  toggleButton();
  animationIndex = ++animationIndex % 2;
  console.log(animationIndex); // 0, 1, 0, 1, 0, 1, 0, 1
  animations[animationIndex].restart();
});

 

you can click the button a million times and only get an animationIndex of 0 or 1. You could similarly have 4 or 100 animations that you cycle through in this fashion.

 

Every time the button is clicked or a timeline completes I call the toggleButton() function that will toggle the visibility of the button. 

 

function toggleButton() {
  isButtonVisible = !isButtonVisible;
  //you can run your own script to toggle active / in-active state of button. 
  //i'm just hiding it for now.
  TweenLite.set(button, {autoAlpha: isButtonVisible ? 1 : 0}); 
}

 

See the Pen awGNgO?editors=0110 by GreenSock (@GreenSock) on CodePen.

 

You may have noticed that using background:"red" caused the background to instantly change to red instead of animate smoothly. Be sure to use backgroundColor:"red" like:

 

TweenLite.to(".menu", 1, {backgroundColor:"red"});

 

[Carl]

Oh, thanks for providing the nice and reduced demo, Tartufo. Very helpful!

[TartufoDAlba]

I ended up using your (Carl's) method, Thank you! Then adding the click turning off/on. Here is the final pen just for information purposes if it's searched:

 

 

See the Pen eRrGbo?editors=1111 by tartufodalba (@tartufodalba) on CodePen.

 

[Carl]

Cool. Glad you got it working.