Optimizing ScrollTrigger

[fernandocomet]

How can I optimize this code?

Is doing what I want but do I need three Scrolltriggers?

See the Pen gOZojBb by fernandocomet (@fernandocomet) on CodePen

[GreenSock]

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!

[fernandocomet]

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?

[Rodrigo]

Hi,

 

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!

[fernandocomet]

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:

[GreenSock]

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?