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.