Navbar hide on scroll + change logo & colors

[deVitae]

Hi all!

Discovered GSAP only a few days ago but I'm already loving it - the possibilities seem endless.

I've managed to achieve the functionality I needed but just wanted to double-check if I've approached this correctly. Got a gut feeling that I've complicated things way too much.

Essentially, I want the navbar to appear with white logo, white links and transparent background on page load. Then, as user scrolls down, it should disappear. When the user scrolls back up - it should slide down again but with black logo, black links and white background.

If the user ever returns to the top of the page, the navbar should return to its initial state: white logo, white links & transparent background.

This works but I'm somewhat worried about my use of the timeline and self.progress check - I suspect there's a more elegant and less performance-intense approach?

Would greatly appreciate if someone could have a look at my codepen and point out any mistakes!



 

See the Pen RwvezMj by vitaeludus (@vitaeludus) on CodePen

[mvaneijgen]

Hi @deVitae welcome to the forum!

 

Looks great! And great demo, btw! I don't know if I would have done it any differently, you could maybe abstract out the reverse of the timeline to the onEnter and onLeaveBack: callbacks. Every ScrollTrigger has a view callbacks and you now only used the onUpdate, with a if statement, but the onEnter and  onLeaveBack  are the exact ones you'll need. I've also wrote out a second option in Codepen if you give ScrollTrigger control of the timeline than you can use the toggleActions (which are the exact same as the callbacks), they are a bit easier to write out.

 

Does the animation need to play on page load? Because if it should start out white I would set my CSS up as they need to be on page load (start with white).

 

Again your version looks great and it works, so why fix it? I would only start to worry if you're seeing issues. The question is going to be different if draw like 10,000 of these and  optimising for that is a whole other beast, so if it works it works! 

 

Hope it helps and happy tweening! 

 

See the Pen gOqQbrQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[deVitae]

Thanks @mvaneijgen!

Will go with the toggleActions - thank you for this and for welcoming me & taking the time to look through the demo! This was my very first tween for a personal project but I'm hoping to incorporate GSAP into my toolkit from here-on-out.

And no, the idea is for all pages to have a 100vh & 100% width photo/video at the top - hence the transparency of the nav. But the body below the photo will be white, so that's why I've pursued this fairly niche functionality.

I feel like GSAP lets you create even the most advanced animations with a very simple syntax but that's why I was afraid of having made some really stupid mistakes here. If you don't develop good understanding of the basics in the beginning, it's bound to come back to bite you in more advanced tweens.

Thanks again!