Gsap issue when overlay opacity is set to : 0

[rafyc]

Hi,

 

I have an issue usig gsap and try to understand what's going on.

 

In introduction when the page is loaded there is an overlay fading from 100% to 0% opacity with gsap  letting appear the home page. It's working but :

All that is uneder this overlay doest support mouse hover, or text select because this overlay (with "z-index: 99")  still present with 0% opacity .

If i inspect with dev tool and don't display the overlay, it's working again.

 

Is there a way to hide this overlay after being animated ?

 

I think it's a basic issue but quite new in gsap coding.

 

Thanks for your help

 

 

.my-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  z-index: 99;
}

gsap.to(".first", { duration: 1, ease: "circ.in", opacity: 0 })

<div class="my-overlay first"></div>

 

[GreenSock]

Two things: 

1. You can use autoAlpha: 0 instead of opacity: 0. The only difference is that autoAlpha automatically changes "visibility" to "hidden" when it hits zero. 
2. In your CSS, set pointer-events: none to let the pointer events go "through" it. 

Happy tweening!

[rafyc]

Many thanks !