Fade in and out child content based on scrolling parent

[Christian Dimas]

Hey folks, I've managed to build a simple horizontal scrolling based on the ScrollTrigger example and it works quite well IMO.

 

Each of the slide has a content div which holds all the overlaid text for the slide. I want the content div to fade in slowly when the slider is starting to enter the viewport, and then starts fading out when the slide is almost out of view. But I can't find a way to make this work. 

 

Also I'm wondering, is it possible to make the fade-in & fade-out transition tied to the scroll? So if the user isn't scrolling the opacity won't change.

 

Any suggestion on how to create that?

 

Thanks!

 

Edit: the content div is positioned fixed by design, so it will fade in and out at the center of the page

See the Pen NWwbXMO by _christiandimas (@_christiandimas) on CodePen

[GreenSock]

Sure, check out the containerAnimation feature added in 3.8.0: