Opacity animation in react not working as expected

[guano]

I'm trying to do a simple onScroll animation with ScrollTrigger but its driving me insane for 4h.

One of them works as intended and fades the content, the other one just sets the elements opacity to 0 as soon as it triggers..

When i then scroll back it starts animating from 0 opacity to 1, but when I scroll down it justs sets the opacity straight to 0 no fading.

Im going insane with this, any tips? 

Thanks anyone for reading

[OSUblake]

Hi @guano

 

Can you make a minimal demo showing the issue, either on CodePen or CodeSandbox? Thanks!