How to remove scrolltrigger animation when we've scrolled past the section?

[ladybytez]

I managed to get the square to change colour on scroll to a specific section. What's the best way to get the square to revert colour when respective section is scrolled to? Do I have to do a scrolltrigger for each section?

See the Pen dyWKXKp by ladybytez (@ladybytez) on CodePen

[ladybytez]

I think I figured this out! Leaving it here if anyone wanna improve / refer to this  

[ladybytez]

Hi there! I decided to update the code and now I am stuck trying to change the square colour on the last section (section3) to another colour. Is it possible to do something like this with ScrollTrigger since we can't scroll anymore when we're on section 3?

 

section 1- pink square

section 2- white square

section 3- orange square

 

 

[GreenSock]

This is how I would recommend doing it: 

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

 

That way, you can add as many sections as you want. Significantly less code.  You could even add the color as a data-attribute in the HTML instead of using an Array. 

 

Happy tweening!