Share Posted August 31, 2020 Hello I would like to create a animation where there are three section on a main container. Now whenever each section enter the viewport I would like to transition the background color of main container. For example when section 1 enter background color for main container is red, for section 2 it is rebecca and for section 3 it will be aqua. How should I implement this using scroll triggers? The reference for this animation can be found on https://www.yalantis.com website. See the Pen YzqxXda?__cf_chl_jschl_tk__=d37136b939b9c9f3f6435b6933ecb2a0ca843436-1598862308-0-AdKYFHiy0NSALqIrEa1AtTeHPeezUrzgYJahcJQWRDAYVX7T1W5wJLHPZxuUIN7UfMOPGn6oGDRg0tzkgSrOLHObsJyN34a3uda6kHSfLBLyYxzYbdTY6OifKHvsof3QjCS8fiGK5gh by rinkusam12 (@rinkusam12) on CodePen Link to comment Share on other sites More sharing options...
Share Posted August 31, 2020 Hi Rinku, that's a very interesting reference site. I think that you might be interested in a recent post that I made on a similar question 3 Link to comment Share on other sites More sharing options...
Share Posted August 31, 2020 Hey @Rinku Samanta, Welcome to the GreenSock Forum. How about this option? See the Pen xxVLwzJ?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 1 Link to comment Share on other sites More sharing options...
Author Share Posted August 31, 2020 2 minutes ago, mikel said: Hey @Rinku Samanta, Welcome to the GreenSock Forum. How about this option? Happy tweening ... Mikel Hi Mikel, this option is exactly what I was looking for but I want to smooth out the color transition effect. Right now its abruptly changes from red to blue and blue to aqua. I think scrub might help in this but I would like to know whats your take on this. Link to comment Share on other sites More sharing options...
Share Posted August 31, 2020 Hey @Rinku Samanta, You could use onEnter: () => gsap.to('main', {backgroundColor:color}), 3 Link to comment Share on other sites More sharing options...
Author Share Posted August 31, 2020 19 minutes ago, Richard1604 said: Hi Rinku, that's a very interesting reference site. I think that you might be interested in a recent post that I made on a similar question Hi Richard, Thank you very much for the discussion reference. It is exactly what I am trying to achieve right now. 1 Link to comment Share on other sites More sharing options...
Share Posted July 22, 2021 Hey @mikel, I can't get this to work properly: See the Pen dyWRELw by jillianadriana (@jillianadriana) on CodePen onEnter works but it seems that the others do not. I have used this code before and it worked great but suddenly it isn't working. In my external code editor, the code shows that something isn't right but I can't figure out what's going on. Do you have any insight? Link to comment Share on other sites More sharing options...
Share Posted July 23, 2021 I'm not sure exactly what you're asking, but those callbacks are indeed being called properly. You can add a console.log() to verify. I wonder if you're just using the wrong color. At every point, you're animating to exactly the same color, so it would make sense that you don't notice anything changing after the first time. Link to comment Share on other sites More sharing options...
Share Posted July 23, 2021 10 hours ago, GreenSock said: I'm not sure exactly what you're asking, but those callbacks are indeed being called properly. You can add a console.log() to verify. I wonder if you're just using the wrong color. At every point, you're animating to exactly the same color, so it would make sense that you don't notice anything changing after the first time. Sometimes I surprise myself with how silly my mistakes are after 8 hours of coding all day long 🤦🏼♀️ 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