bichant Posted February 19, 2020 Share Posted February 19, 2020 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 More sharing options...
ZachSaucier Posted February 19, 2020 Share Posted February 19, 2020 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 More sharing options...
bichant Posted February 20, 2020 Author Share Posted February 20, 2020 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 More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 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 More sharing options...
OSUblake Posted February 20, 2020 Share Posted February 20, 2020 22 minutes ago, ZachSaucier said: Given I still am not clear on what the end goal is (even after the video in your last thread) I think they are looking for some type of if/else logic in the click event, but I'm not sure what the end goal is either. 🤷♂️ Link to comment Share on other sites More sharing options...
bichant Posted February 20, 2020 Author Share Posted February 20, 2020 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!! Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now