AshBrightYellow

Thank you so much @mvaneijgen ! I really appreciate the explanation of your answer as well, that helps a lot. I am very new to GSAP (and Javascript in general) so the comments in my code really help me when I am getting stuck! Thanks again, it works perfectly.

Hi there, I have set up a basic codepen showing the effect I am trying to achieve (it's best opened up in a new tab for the height reasons). It essentially works how I want it to, except for one thing: the second black 'square' appears directly after the first one, even though it shouldn't appear until its starting trigger reaches the correct position. When scrolling to the second starting point, it works correctly, but then fires the first square again. The two 'colorWipe's work perfectly. I am sure it's something to do with how I've set up the forEach part, but I am not sure where to go from here. I have tried placing the 'const square' part outside of the loop as well, but that ends up the same. I have also tried just using the 'document.querySelector' rather than the gsap code, but that also shows the same error. Thanks in advance for any help.