Elindo Posted September 1, 2021 Share Posted September 1, 2021 Now, I didn't minimize the demo any smaller because everything is linked together However, the items to add some functionality are these last buttons of the code: btnstart.onclick = () => { animation = stagestart(); } btnstop.onclick = () => { if(animation)animation.kill(); animation = stagestop(); } For the STOP button I want it to kill the animation, and go to the stagestop animation (<-- this part is done) And.. once you click the Stop button I want to disable button A and button B... meaning if you push A or B they won't work. How do you go about to do these things about disabling other buttons? For the START button If nothing has been previously touched ... at the very begining of the animation it would play animation stagestart (that is in the code), PLUS enable buttons A and B so they can now be functional. If the STOP button has been pressed, then It would kill animation for button STOP, play animation stagestrat and enable buttons A and B so they can now be functional again. If A or B are playing, then nothing would happen. Buttons A and B would be normally disabled. To play the proper line I suppose I can do something like: if (functionx) function.play (); if (functionx) funtion.kill (); animation = startstage ^^ that is likely wrong.. But how do you go about to enable and disable buttons? See the Pen vYZLjJz by Elindo586 (@Elindo586) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 There are many ways depending on what you want to do. See the Pen GREZXyX by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Elindo Posted September 1, 2021 Author Share Posted September 1, 2021 I think I can digest that.. How do you set the button to be normally disabled? Can you do something like.. ?? gsap.set ("#A, #B", {disabled:true}); Just to make some notes when I get back. you created a let disabled = false; then a click eventlistener for each button and gave it a name. Then a function to call out the event listener to do an If / else task. Maybe later I can try something like.. let disabled = false; btnstop.onclick = () => { if(animation)animation.kill(); animation = stagestop(); btna.disabled = true; btnb.disabled = true; } btnstart.onclick = () => { animation = stagestart(); btna.disabled = false; btnb.disabled = false; } Link to comment Share on other sites More sharing options...
Elindo Posted September 1, 2021 Author Share Posted September 1, 2021 Well... I need to change my code... Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 20 minutes ago, Elindo said: Can you do something like.. ?? gsap.set ("#A, #B", {disabled:true}); No. There are only 2 ways to disable/enable a button. // to enable button2.setAttribute("disabled", ""); button3.disabled = true; // to disable button2.removeAttribute("disabled"); button3.disabled = false; 3 Link to comment Share on other sites More sharing options...
Elindo Posted September 1, 2021 Author Share Posted September 1, 2021 let disabled = false; btna.setAttribute("disabled", ""); btnb.setAttribute("disabled", ""); btnstop.onclick = () => { if(animation)animation.kill(); animation = stagestop(); btna.disabled = true; btnb.disabled = true; } btnstart.onclick = () => { animation = stagestart(); btna.disabled = false; btnb.disabled = false; } So... what I am doing wrong? I am just creating a variable named disabled and giving it a false value.. then trying to set A and B as normally disabled.. Then expecting button A and B to work and not work when I say disabled is true or false when pushing the start or stop buttons. Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 37 minutes ago, Elindo said: Can you do something like.. ?? gsap.set ("#A, #B", {disabled:true}); Actually, that will work. I was thinking about the attr, but GSAP should be able to change the property. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 You don't need this. I was showing 2 different ways. btna.setAttribute("disabled", ""); btnb.setAttribute("disabled", ""); Just forget I showed the setAttribute/removeAttribute. To disable a button. button.disabled = true; To enable a button. button.disabled = false; 2 Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 You also have to use a button element <button>My Button</button> 1 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 1, 2021 Share Posted September 1, 2021 You have a new issue now because you can't use a html button inside of a svg, you need to use a foreignObject and then inside add your html button. Or maybe you can add a little trick on your code to "emulate" a disabled state: let isMyButtonDisabled = false; const myAnimation = gsap.timeline({ onComplete: ()=> isMyButtonDisabled = false; }); mySvgElement.addEventListener('click', ()=> { if(isMyButtonDisabled) return; isMyButtonDisabled = true; myAnimation.play(); }); 1 Link to comment Share on other sites More sharing options...
Elindo Posted September 1, 2021 Author Share Posted September 1, 2021 btna and btnb are the links for buttons A and B... for whatever reason the buttons are not getting disabled. I added: let disabled = false; gsap.set ("#A, #B", {disabled:true}); btnstop.onclick = () => { if(animation)animation.kill(); animation = stagestop(); btna.disabled = true; btnb.disabled = true; } btnstart.onclick = () => { animation = stagestart(); btna.disabled = false; btnb.disabled = false; } Link to comment Share on other sites More sharing options...
Elindo Posted September 1, 2021 Author Share Posted September 1, 2021 2 minutes ago, nico fonseca said: You have a new issue now because you can't use a html button inside of a svg, ... let isMyButtonDisabled = false; const myAnimation = gsap.timeline({ onComplete: ()=> isMyButtonDisabled = false; }); mySvgElement.addEventListener('click', ()=> { if(isMyButtonDisabled) return; isMyButtonDisabled = true; myAnimation.play(); }); Thanks... I'll try that later on.. All my drawings are svg. I am using the reference variable to link them to the svg object drawing. The latest code I have is above.. I need some time to digest the code you are showing.. Thank you much.. Link to comment Share on other sites More sharing options...
Solution nico fonseca Posted September 1, 2021 Solution Share Posted September 1, 2021 Here I made a pen for you See the Pen b1ff5801861c6ae59f2dcd041c3acfcf by nicofonseca (@nicofonseca) on CodePen 3 Link to comment Share on other sites More sharing options...
Elindo Posted September 1, 2021 Author Share Posted September 1, 2021 @nico fonseca Thanks that worked! How do you set the A and B buttons as normally disabled? I see you created 2 variables, one for each button, and then added the variable with a value to the push button sections. Why exactly is this line needed? if(isButtonADisabled) return; I added one variable for both buttons, and didn't do a line as the one you did above.... and of course it didn't work. Link to comment Share on other sites More sharing options...
nico fonseca Posted September 1, 2021 Share Posted September 1, 2021 @Elindo when you use a return statement, you stop the flow of your code. You can learn more here. I used this little trick because you needed a HTML button to set a disable/enable state, but on the SVG the button doesn't exist so you need to create something like this or use foreignObject as I mentioned earlier. 2 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