Having a header fade in/out at a certain point in a page

[ChrisHM]

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.

See the Pen GRxJpoe by ChrisHM (@ChrisHM) on CodePen

[akapowl]

 

Welcome to the GSAP forum, Chris!

 

44 minutes ago, ChrisHM said:

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.

 

The messier your code, the longer it will take for people helping to even get to the point to know how they can possibly help. While it is quick for you, it will not make things quicker for us - and we will have to do the extra work to make sure things display properly in the first place - like your nav. So the time it takes will be the same in the end, maybe even longer because we are not familiar with your project like you are. 

 

Also, if there is lots of images not loading that actually do in your actual project, some things we suggest might not even work out properly, because the dimensions of the images might matter depending on the scenario. So it is always best (even just out of courtesy to those you ask for help) to provide a demo as clean and minimal as possible.

 

With regard to your actual question: The way you are handling things with your ScrollTriggers, you are triggering an animation to fade the headers color in and an animation to fade it out at the exact same point in scroll - see the problem?

 

You can create just one tween attached to one ScrollTrigger and define how that tween should be controlled by ScrollTrigger via toggleActions.

 

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

If you want the tween to start playing once that sticky part at the bottom starts scrolling with the flow, you'll also want to re-consider the start of your ScrollTrigger. It looses its stickyness when the bottom of the carousel-wrapper hits the bottom of the viewport - so instead of 'top bottom' it would actually be 'bottom bottom' - the first parameter is related to the trigger element, the second to the viewport.

 

If you then set the toggleActions to "play none none reverse", it will play the tween onEnter of the ScrollTrigger - i.e. when the bottom of the trigger element hits the bottom of the window when you are scrolling down - and it will reverse the tween back to the transparent color onLeaveBack, so at that exact same point but when you scroll back up again

 

Like this. Is that what you had in mind?

 

See the Pen WNzvQVj by akapowl (@akapowl) on CodePen

 

[ChrisHM]

16 minutes ago, akapowl said:

 

Welcome to the GSAP forum, Chris!

 

 

The messier your code, the longer it will take for people helping to even get to the point to know how they can possibly help. While it is quick for you, it will not make things quicker for us - and we will have to do the extra work to make sure things display properly in the first place - like your nav. So the time it takes will be the same in the end, maybe even longer because we are not familiar with your project like you are. 

 

Also, if there is lots of images not loading that actually do in your actual project, some things we suggest might not even work out properly, because the dimensions of the images might matter depending on the scenario. So it is always best (even just out of courtesy to those you ask for help) to provide a demo as clean and minimal as possible.

 

With regard to your actual question: The way you are handling things with your ScrollTriggers, you are triggering an animation to fade the headers color in and an animation to fade it out at the exact same point in scroll - see the problem?

 

You can create just one tween attached to one ScrollTrigger and define how that tween should be controlled by ScrollTrigger via toggleActions.

 

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

If you want the tween to start playing once that sticky part at the bottom starts scrolling with the flow, you'll also want to re-consider the start of your ScrollTrigger. It looses its stickyness when the bottom of the carousel-wrapper hits the bottom of the viewport - so instead of 'top bottom' it would actually be 'bottom bottom' - the first parameter is related to the trigger element, the second to the viewport.

 

If you then set the toggleActions to "play none none reverse", it will play the tween onEnter of the ScrollTrigger - i.e. when the bottom of the trigger element hits the bottom of the window when you are scrolling down - and it will reverse the tween back to the transparent color onLeaveBack, so at that exact same point but when you scroll back up again

 

Like this. Is that what you had in mind?

 

 

 

 

Yes, this is exactly it. I tried toggleAction but hadn't set the parameters properly so I thought it wasn't the right tool for the job. Thanks for the help!