joelabeyta

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

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.