I want to have a header's background fade in from transparent when it clears a certain point on the page, and fade back out if I scroll back up so the header is overlapping the element it cleared earlier. I'm trying to get the effect of this header https://www.civitalife.com/. I can get it to either change at the right point using if statements but without any animations, just immediate switches, or have it trigger at the right spot but activate both the fade in and the fade out at once and then stay invisible again no matter how often I cross the trigger point (the trigger point is the bottom of the carousel image div, where the footer saying "welcome to your new home" stops being stickied and starts scrolling). What is the best way to create an element that will fade in and out depending on whether the trigger point is above/below the element, and to trigger on every pass through the trigger point?
p.s. sorry the code is really messy, I was asked to duplicate the website as quickly as possible so I haven't cleaned up or optimized anything there, if the problem isn't my gsap code I apologize.
