Changing Background Color on each section

[Sveninyo]

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

[mvaneijgen]

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!

 

[Sveninyo]

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.