Jump to content
Search Community

Working with .isActive() on restart

TartufoDAlba test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 ...

 

  • Like 3
Link to comment
Share on other sites

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

 

  • Like 3
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.
×
×
  • Create New...