ferriss Posted September 26, 2022 Share Posted September 26, 2022 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 Link to comment Share on other sites More sharing options...
ferriss Posted September 26, 2022 Author Share Posted September 26, 2022 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. Link to comment Share on other sites More sharing options...
Solution Cassie Posted September 26, 2022 Solution Share Posted September 26, 2022 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 2 Link to comment Share on other sites More sharing options...
ferriss Posted September 26, 2022 Author Share Posted September 26, 2022 SuperHero. Need to spend more time with ScrollTrigger/GSAP. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now