Sveninyo Posted June 10 Share Posted June 10 Hello, I have made a section reveal effect based on the demo by Zach Saucier ( See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen ). So far everything works fine, however I want to change the background color of each section from black to white as soon as they are revealed. Currently only the first section changes the color. What am I doing wrong? Thank you for your help. See the Pen zYMGoYK by Sveninyo (@Sveninyo) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted June 10 Solution Share Posted June 10 Hi @Sveninyo, Personally when working with ScrollTrigger I remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. So here is a fork of your pen with ScrollTrigger disabled and just a timeline with the animations. I've moved the background tween to the front, because I would think you want to start with that. I've kept the same stagger for both tweens, but I've set the yPercent tween to start at the stagger amount. See the Pen MWzwbPp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Then it is just enabling ScrollTrigger again to get everything to work on scroll. You rarely need more than one ScrollTrigger to get the desired result, just a rule of thumb to keep in mind when building new ideas. Hope it helps and happy tweening! See the Pen abQOBQq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen If you want to learn more about staggers and how you could do some powerful things with them check out our own @Carl's YouTube channel. There you can learn the same logic I've used with the offset staggers! 5 Link to comment Share on other sites More sharing options...
Sveninyo Posted June 10 Author Share Posted June 10 Thank you, I will study your pen. I just bought Carls Courses yesterday. Quote just focus on the animation at first and only when you're happy with the animation add ScrollTrigger I'll keep that in mind for sure. Quote You rarely need more than one ScrollTrigger to get the desired result. I just thought so. Just didn't know any better. 1 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