ScrollTrigger FadeIn/Out component not working properly

[Gxneral]

I am trying to create a component that I wrap my other components with to fade in when I scroll to them and fade out when I scroll passed them. I think the problem arises when I put 2 animations on the same component. I just don't know how to fix it. 

I think the problem is that I am using from() and to() and they take the CURRENT value of the div which might be opacity: 0 and thus it remains invisible or sometimes it becomes opacity:0.2. What would be a better approach to this?

See the Pen ZEozRNZ by gxnxrxlmasri (@gxnxrxlmasri) on CodePen.

[GreenSock]

Hi @Gxneral. Welcome!

 

Are you trying to do something like this?: 

See the Pen gOzOdRq?editors=0010 by GreenSock (@GreenSock) on CodePen.