Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Elindo

Why are my items not going to 0% opacity?

Recommended Posts

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

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

  • Like 4
Link to comment
Share on other sites

The basic is that the opacity is still showing. 

 

I wrote the code lines for opacity above. 

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Thanks...

 

I see this is gonna be fun.

 

Copy and paste doesn't always work...

  • Haha 1
Link to comment
Share on other sites

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

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