Making a div appear on the screen!

[danajcarroll]

I know this must be super simple, but I'm a complete newb!

 

What I want: A pink box is invisible, then fades onto the screen when one clicks on a button 

 

What it's doing: The pink box is already on the screen, but still does the fade animation when the div is clicked on

 

I'm sure this is probably a simple fix that I'm missing, but I'm really stumped and it's getting disheartening. 

 

Thanks for the help!

See the Pen xxGaWOd by danajcarroll (@danajcarroll) on CodePen

[PointC]

Hi and welcome to the forum.

 

You wouldn't really want to set it to display none in your CSS. I'd set the opacity (in the CSS or with GSAP) to 0 and then tween that on click.

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

 

Does that help? Happy tweening.

 

 

[danajcarroll]

That totally helps, thanks so much!