Jump to content
Search Community

Optimizing ScrollTrigger

fernandocomet test
Moderator Tag

Recommended Posts

Here's how I'd probably do it - just add a data-nav-colors attribute to the sections you want to affect the nav colors, and put a comma-delimited list of the colors (backgroundColor, then color): 

See the Pen YzdYdzK?editors=0010 by GreenSock (@GreenSock) on CodePen


There are a lot of ways you could do it. Hopefully this gets you on your way.


Happy tweening!

Link to comment
Share on other sites

Thanks! Good use of Attributes.


I have realized of a minor issue from my previous demo :


Once you have scrolled down, if you go back to top:

- When the navbar gets to "colorchange", it should be black

- When it gets out of "colorchange" it should be transparent


Looks like events "onEnterBack" and "onLeave" are not working. Maybe I have an event issue

Any hint?

Link to comment
Share on other sites



I'm a bit confused by the setup you have right now. You have three different loops each one creates a series of ScrollTrigger instance that animates the background color of the Navbar. Is a bit hard to follow but I'm pretty sure that you are creating conflicting instances here. It'd be far better and easier to follow/debug if you had just one loop for all  your color changes and add distinctive markers for each ScrollTrigger instance that affects such behaviour. Maybe better explain why you have so many loops for doing just one thing (changing the background color of the navbar) and what's the logic behind this.


Happy Tweening!

Link to comment
Share on other sites

Thanks Rodrigo,

Don't worry, I assure you I am more confused than you with the code


The thing is that in the demo with only one ScrollTrigger 

See the Pen YzdYdzK by GreenSock (@GreenSock) on CodePen


 onToggle is not working when you scroll down and then you scroll back to top as NavBar is not getting transparent


This is what I want to achieve:


Link to comment
Share on other sites

That's just a logic thing related to the fact that your very first color-changing section is below the trigger area So you can either add an invisible section that fills that top area as a trigger to go back to the transparent state, or you can add some conditional logic that'll animate back to the initial state in the onLeaveBack() of the very FIRST section: 

See the Pen oNJEWXx?editors=0010 by GreenSock (@GreenSock) on CodePen


Is that what you want? 

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...