[Toggle state while element is in view with scrollTrigger]

Thank you so much! This is exactly what I needed. 

[Toggle state while element is in view with scrollTrigger]

I have a list of years and and then a bunch of sections of content. Each section pertains to a year. As the section scrolls into view (either up or down), I need the corresponding year in the list to change opacity and then change back when the element is out of view. I'm trying to use the following:

 

gsap.timeline().to(tlNavItem, {

    opacity: 1,

    ease: 'none',

    duration: .3,

    scrollTrigger: {

        trigger: tlBLock,

        start: 'top bottom',

        end: 'top bottom',

        scrub: false,

        markers: true

    }

}).to(tlNavItem, {

    opacity: .3,

    ease: 'none',

    duration: .3,

    scrollTrigger: {

        trigger: tlBLock,

        start: 'bottom top',

        end: 'bottom top',

        scrub: false,

        markers: true

    }

})

 

Everything I try ends up with weird results. I've tried so many things. I can't find any examples of this kind of thing. I don't have a code pen for this, it's part of huge project and it would take so long to recreate it. I hope someone can give me a clue based on what I've described. It seems like such a simple thing. I don't know what I'm missing.