Jump to content
Search Community

Control Two Functions with One Button

bichant test
Moderator Tag

Recommended Posts

What I Want

Click the 'Change Mode' button and the colorFlash function plays the tlb timeline.  A red box fades in from autoAlpha : 0 to autoAlpha: 0.8 over 1 second then repeats indefinitely.

Click the 'Change Mode' button again and the colorChng function plays the tl timeline. The box changes from red to green to blue over 3 seconds and repeats indefinitely.

 

What is Happening

When you click the button it skips the colorFlash function and goes straight to the colorChange function. The box changes from red to green to blue and repeats.

 

According to w3schools.com this should work how I have it.

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

 

Am I missing/ misunderstanding something?

The colorFlash function works as it should if I comment out the colorChng function.

See the Pen eYNddoE by bichant (@bichant) on CodePen

Link to comment
Share on other sites

Hey bichant. 

 

When you add two event listeners to an element, it doesn't queue them - both fire right once that event happens. So colorFlash and colorChng fire right once the button is clicked. Since they both affect the same properties on the element, one is overwriting the other. 

 

You probably want to attach the function to two buttons, right?

 

Side notes: 

  • I think you're wanting to apply the defaults to just the timeline, not all of GSAP, correct? In that case you should pass it as part of the vars object of the timeline.
  • It doesn't make much sense to have paused: true and then soon after call tl.play(). The timeline is only created when the function runs, so you don't have to worry about it playing beforehand as long as it's inside (and thus scoped to the function). 
  • You can reuse the same variable in different scopes without issue. For example you have tl and tl2 in different functions but they can both be tl. 

Is this what you're wanting?

See the Pen zYGKoJy?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Unfortunately I need to run the two different tweens off of one button. I might be able to do it like Carl shows in his new Linear Navigation with addPause() video on Snorkl.tv Academy. Or perhaps an array?! I will have to see what I can come up with. 

 

Thank you for all the great tips Zach.  I did not realize  the defaults  would affect all of the code. Good to know.

 

Thank you again for your help!

Link to comment
Share on other sites

58 minutes ago, bichant said:

Unfortunately I need to run the two different tweens off of one button.

It's easy to run two different tweens off of one button - in your case you could call both functions in one listener like this:

pause.addEventListener("click", function() {
  colorFlash(); 
  colorChng();
});

The problematic part is just getting the tweens to not override each other in the way that you want. Given I still am not clear on what the end goal is (even after the video in your last thread) it's hard for me to suggest a method. 

Link to comment
Share on other sites

I am trying to demonstrate how an RGB light controller works. This controller uses a switch to change between12 colors, dim the lights, make them flash on and off, or make them cycle between all 12 colors. It's light so every animation is a change in color or a change in opacity.

 

Push and release, click, the top of the switch to turn the lights on. Push and release again to change color.

 

Press and hold the bottom of the switch to dim the lights.

Press and release, click, the bottom of the switch and the lights flash on and off in one color.

Press and release, click, the bottom of the switch again and the lights cycle between colors. Much like your color changing rings in this post Blake.

I want this to be interactive and as close to using the real controller as I can make it. That is why I need a mousedown and two click events on one button.

I have most of the code working. ( Thanks to you guys.) My fork shows only the part of the code I need help with.

 

I think I can accomplish what I want to do with a single timeline and .addPause(). I'll let you know how it goes.

 

Thank you again for all of your help and input. You guys rock!!

Light Controler Exp.png

Link to comment
Share on other sites

Again, I think you should create a state diagram:

Quote

I recommend creating a state machine diagram for your situation. That will help you figure out exactly what states you will need and be able to set up your code to work accordingly. Then give it a shot in code. Maybe even start with multiple buttons if that helps (once you have it all working you should be able to lower the amount of buttons using different listeners without too much trouble).

 

Once you've done that, if you're still having issues feel free to post back here and we can help out where you're having trouble. Sound good?

 

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