Jump to content
GreenSock

joelabeyta

Toggle state while element is in view with scrollTrigger

Go to solution Solved by Carl,

Recommended Posts

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.

Link to comment
Share on other sites

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()

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×