Toggle state while element is in view with scrollTrigger

[joelabeyta 1 Likes (Newbie)]

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.

[Carl 11,064 Likes (Superhero)]

Hi and welcome to the forums,

 

It's always best to provide a minimal demo as it helps us better understand your html and css setup (very important) and offer solutions more tailored to what you're working on.

 

That said, you don't want to have ScrollTrigger's on tweens in a timeline (ScrollTrigger Common Mistakes)

 

What you seem to be describing has been addressed here before, but I'll have to find a demo or create one.

 

In the meantime I'd suggest creating a ScrollTrigger for each section (date). Use its onToggle to determine its active state and then fade your dates in the list accordingly.

 

onToggle from ScrollTrigger docs

Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity()

[Carl 11,064 Likes (Superhero)]

This was kind of fun to make and borrows from some technique's I've seen @GreenSock discuss. It will most likely be a video lesson in ScrollTrigger Express very soon

 

See the Pen eYyBooE?editors=0110 by snorkltv (@snorkltv) on CodePen

[joelabeyta 1 Likes (Newbie)]

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