Nested ScrollTrigger

[ferriss]

Hi,

 

I've got a setup where I require a nested ScrollTrigger.

 

As per the link, I only want the animation to trigger if inview, but it seems to just be applying to all. So the initial load is how it should look all the while in terms of opacity regardless of scroll, but the scroll is applying to all li items instead of those only in view. I would assume, if it applied to only inview, then the animation would work as expected.

 

Thanks

See the Pen ExLbOZm by CHEWX (@CHEWX) on CodePen

[ferriss]

To explain result, if viewport is 400px and each item is 100px, then opacity should be 1, .66, .33, .0. If you scroll 400px, then the items in view should still be those values so the fade always shows and transitions as you scroll.

[Cassie]

Hi there!

 

You're currently using the ul as a trigger - I think the effect you're after would best be achieved by using the individual list items as triggers.

Something like this?

See the Pen MWGOZKE?editors=0010 by GreenSock (@GreenSock) on CodePen

[ferriss]

SuperHero. Need to spend more time with ScrollTrigger/GSAP.