Elindo Posted August 30, 2021 Share Posted August 30, 2021 Ok.. let's try this agian... one step at the time.. This is a more visual demo of what I was trying to ask on previous posts.. this time around one step at a time.. Why are my red and blue boxes not going to opacity 0? I have done the let code line, followed by the gsap.set ... and the I can still view them.. let cylrod = document.querySelector("Rod"); let aline1 = document.querySelector("#A1"); let aline2 = document.querySelector("#A2"); let bline1 = document.querySelector("#B1"); let bline2 = document.querySelector("#B2"); let pline1 = document.querySelector("#P"); let btna = document.querySelector("#A"); let btnb = document.querySelector("#B"); let btnstart = document.querySelector("#Start"); let btnstop = document.querySelector("#Stop"); gsap.set(aline1, {opacity: 0}); gsap.set(aline2, {opacity: 0}); gsap.set(bline1, {opacity: 0}); gsap.set(bline2, {opacity: 0}); gsap.set(pline1, {opacity: 0}); Now... if you want to know the entire scoop, and get ahead of future questions of this interactive animation it would be some like... Push Button Start Both Center blue and red boxes will be on Will enable operations for Push button A and Push button B Push Button A Will maintain opacity to 0 for any boxes on the center or right side of the screen will move the green rectangle (5 seconds) from your left side of the screen to the right side of the screen next to the other set of blue and red squares. While moving from left to right the left blue box will be on Once the green square reaches the right side the leftt blue box will disappear and the red left box will be on for 1 second After once second of red left box on... both center blue and red box will be on.. End of cycle. Push Button B Will maintain opacity to 0 for any boxes on the center or left side of the screen will move the green rectangle (4 seconds) from your right side of the screen to the left side of the screen next to the other set of blue and red squares. While moving from right to left the right blue box will be on Once the green square reaches the left side, the right blue box will disappear and the red right box will be on for 1 second After once second of red right box on... both center blue and red box will be on.. End of cycle. Push Button Stop Will turn all blue and red boxes opacity to 0 Will disabled push buttons A and B and won't be able to operate. If push button A , and then you push B, then push button B will take action over A. If you push button B, and then push A, then push button A will take action over B. Push button A or push button B will need to be able to pick up the movement at any random place where the green square might be, and it should not take the full 5 or 4 seconds of their initial setting (x:0) as the green square might be in any position. See the Pen bGREYoK by Elindo586 (@Elindo586) on CodePen Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted August 30, 2021 Share Posted August 30, 2021 A few quick things. 1. There are errors all throughout the HTML (within the SVG markup), CSS, and Javascript. 2. There is far too much going on to truly get a grasp of what you are trying to do and, furthermore, help you achieve that. Simplify the problem down to the basics and we can help you from there. That doesn't mean you won't get answers to the more complex workings, it will just help us to provide answers that you can build on. Shaun 4 Link to comment Share on other sites More sharing options...
Elindo Posted August 30, 2021 Author Share Posted August 30, 2021 The basic is that the opacity is still showing. I wrote the code lines for opacity above. Link to comment Share on other sites More sharing options...
PointC Posted August 30, 2021 Share Posted August 30, 2021 You didn't close your last group or the svg in your HTML. As Shaun mentioned there are numerous errors in the JS as well. Here's a fork of your demo with just the opacity being set. You can see now that I've commented out most of the JS and the SVG is properly closed, the opacity is set to 0. See the Pen 83faa25f1b7462da70f8b908b8c25c8b by PointC (@PointC) on CodePen 3 Link to comment Share on other sites More sharing options...
Elindo Posted August 30, 2021 Author Share Posted August 30, 2021 Thanks... I see this is gonna be fun. Copy and paste doesn't always work... 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 31, 2021 Share Posted August 31, 2021 Yep, copy paste is the no1 cause of confusion we see in these forums. Always best to start small, write your own code and make sure you understand each bit. Build up slowly. 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