How can I make things appear and disappear with gsap?

[Elindo]

I got a bunch of items (lines)  that I want to make them appear and disappear from the push of a button.

 

I suppose it has to do something with the opacity to make it go from 0 to 100 on a click of a button.  I need the lines to be ON or OFF  on the click of the button... but how do you do it? 

 

Here is an example of one of the items:

 

let solaline = gsap.to("#Sol_A_LIne",{
                       opacity: 0,
                       paused: true,
                       ease: "none",

 

document.getElementById("_x2B__Btn_A").onclick = () =>

rodext.play ();
solaline.play ();

 

See the Pen xxrbWyY by Elindo586 (@Elindo586) on CodePen

[PointC]

Sounds like you're looking for the .set() method.

 

https://greensock.com/docs/v3/GSAP/gsap.set()

 

Does that help?

 

Happy tweening.

 

[PointC]

Just FYI - here's a little demo. You can see the On button sets the opacity with vanilla JS and the Off button uses the GSAP .set() method. Either way is fine.

See the Pen MWoYzYY by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Elindo]

Let me process it a bit..

 

I need all the lines to be normally OFF without any buttons being pushed.

 

Then as buttons are pushed I need certain lines to active, and then another combination of lines to activate at the end of the tween.

 

 

[PointC]

Sure. You can set the initial opacity to 0 in your CSS or use GSAP set() as well. Just take it one step at a time and post a demo if you need GSAP help.

 

Happy tweening.

 

[Elindo]

Ok..  line 11 through 20 is the code sample I have for two of the lines I want to trigger.

 

I need the line to be OFF and come ON when I push "_x2B__Btn_A"

 

I know the code is not complete, but first I want to the lines to disappear and only turn them on at the proper time when the button is clicked.

 

 

let aline1 = document.querySelector("#Sol_A_LIne");
let aline2 = document.querySelector("#Sol_A_LIne_2");

gsap.set("aline1", {opacity: 0});
gsap.to ("aline1", {opacity: 1, duration: 5});
gsap.set("aline2", {opacity: 0});
gsap.to ("aline2", {opacity: 1, delay: 5});

document.getElementById("_x2B__Btn_A").onclick = () =>

rodext.play ();
aline1.play ();

 

 

[PointC]

Okay, the code you have in the text and the code from your demo are a bit different, but most of the things needing attention are the same.

 

You're assigning the target to a variable here:

let aline1 = document.querySelector("#Sol_A_LIne");

You would then target the variable in the tween without quotes.

//switch this
gsap.to ("aline1", {opacity: 1, duration: 5});

//to this
gsap.to (aline1, { opacity: 1, duration: 5 } );

You're telling GSAP to play a tween/timeline here:

aline1.play();

But aline1 is not a tween or timeline so you'll see errors in the console. aline1 is actually your tween target. You need to assign your timeline to a variable so you can control it.

 

Instead of targeting multiple groups like this.

let aline1 = document.querySelector("#Sol_A_LIne");
let aline2 = document.querySelector("#Sol_A_LIne_2");

You could just use a class and target them all. Add a class of .Sol_Line or something like that and then:

const aline1 = document.querySelectorAll(".Sol_Line");

Hopefully that helps. Happy tweening.

 

[Elindo]

Ok thanks...

 

I'll check how to put the tween target in a timeline.

 

and yes, I was thinking of putting 2 animations in one class as they go together one after the other. I also have a 3rd (and maybe more) animation that needs to react to the push of the same button, but I am still thinking on the proper motion reaction so I didn't want to group them together yet .  A few things need to be appearing, moving, and disappearing..  

 

But anyway...  my next task is to make the color lines disappear, and only show them as the buttons are pushed.

 

Line 16 I was thinking it would make aline1 disappear, but the line still there.  It is hard to see on the drawing as there are multiple lines on top of each other, but I should see one of the blue lines inside the little square go away, and for some reason the opacity is not changing.  Is that the proper way to set it up in gsap? 

 

gsap.set("aline1", {opacity: 0});

 

 

 

 

[PointC]

There are still problems in the demo.

 

//switch this
let  aline1 = document.querySelector("Sol_A_LIne");
gsap.set("aline1", {opacity: 0});

//to this
let aline1 = document.querySelector("#Sol_A_LIne");
gsap.set(aline1, { opacity: 0 });

That'll make the line disappear.

 

Happy tweening.

[Elindo]

Oh look at that... "" and # signs are giving problems.... I need to read up a bit more on the proper way to write code.

I think I am first going to do this set up  for all of the items I need to make them disappear..

 

let  aline1 = document.querySelector("#Sol_A_LIne");

gsap.set(aline1, {opacity: 0});

 

Then I am going to try to do a sequence like this one on the video... and link it to a button..

 

I will need different sequences for different buttons..

 

An then... the even more fun part will be that I will need one button to be clicked before other buttons can operate...