Jump to content
Search Community

Change Logo or color on scroll on each section

ti-sign test
Moderator Tag

Go to solution Solved by ti-sign,

Recommended Posts

Hey there


This is one part demo and one part question.


I've been lurking in the forum for some weeks to get help and hopefully this can help somebody else (and someone may even make this better, probably).


I've been looking for a possibility to change my logo in the navbar depending on the color of the section it's on (because I have a transparent navbar). I didn't find a suitable solution so I created one on my own. If this is helpful to anyone with a similar problem, have fun!


You could even go further and check for the lightness in a hsl value to cover all colors (or the w and b in hwb).


However, here's my question. I have absolutely no idea if this is a performant or nice way to do it (I'm fairly new to JS and very new to GSAP). So if any of you pros out there see an immediate stupidity in my code, feel free to correct me 😄.

See the Pen NWzBLGQ by tisign (@tisign) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi @ti-sign


Very nice of you to stop in and offer up this example. It's always interesting to see how folks approach challenges like this.


I really can't say there is anything wrong with what you did and certainly no "immediate stupidity" 😁


I came up with this approach in my lessons


See the Pen wvqjmQq?editors=0010 by snorkltv (@snorkltv) on CodePen


The short explanation is that I store the section and nav colors in separate arrays. If you open the demo in a new window and resize you'll see the height of the nav can change size and yet the nav color always changes exactly when a new section hits the bottom of the nav. 


Perhaps you or someone else will have fun experimenting with this technique as well.


As far as dynamically reading HSL colors to decide the appropriate nav color, that's not something that would come quickly to me, but it doesn't mean it isn't worth exploring further. Thanks again!



  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • Solution

Hey @Carl


Thanks so much for the input! That looks really nice and I just learned that there is a thing called wrap, amazing 😃


My website always has a burger menu, so it doesn't change hight on resize (and it has no background color, so I need to change the logo to stay visible)


I've experimented a bit further myself and here is a solution that seems to work with reading out hsl values:


See the Pen OJEoyVx by tisign (@tisign) on CodePen


For anybody seeing this, I take no responsibility regarding efficiency (Not because of GSAP, I just don't know what I'm doing 😆), I myself am gonna use the color version, as I only use three colors on my site. Ouh, and it doesn't work without background color and/or transparent backgrounds.


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...