ladybytez Posted August 1, 2021 Share Posted August 1, 2021 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 Link to comment Share on other sites More sharing options...
ladybytez Posted August 1, 2021 Author Share Posted August 1, 2021 I think I figured this out! Leaving it here if anyone wanna improve / refer to this Link to comment Share on other sites More sharing options...
ladybytez Posted August 1, 2021 Author Share Posted August 1, 2021 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 2, 2021 Solution Share Posted August 2, 2021 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! 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