Share Posted December 1, 2021 I'm currently building a page with sections that change the body background color when they are scrolled into view. Doing this with ScrollTrigger was very easy but I stumbled upon an issue when scrolling up without scrolling down first. This might sound weird but it can happen when you open the page with an anchor tag or reload the page anywhere but on the very top. The color animation is all messed up then. Since this is hard to explain I created a simplified CodePen with a #bottom anchor and a video of the issue. To test it yourself you need to open the CodePen in debug mode. I guess it has something to do with the reversed to tweens that don't have a correct initial state. Any idea how to solve this? Thanks in advance! See the Pen wvrBYmd by medienbaecker (@medienbaecker) on CodePen Link to comment Share on other sites More sharing options...
Share Posted December 1, 2021 Hey Thomas, Part of the problem is that the start and end are the same. That said, I would do it like this. See the Pen LYzEMKX by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted December 1, 2021 Hey @OSUblake Thanks a lot for your solution. This indeed works much better for the CodePen. Unfortunately I made the demo a bit too minimal as it seems. On the actual website I have color changer "lines". That's why start and end were both set to top center and I used a reversed timeline. Sorry, should have included that in the initial post/demo. I forked the demo and created a new one closer to the actual structure: See the Pen BawyeQz by medienbaecker (@medienbaecker) on CodePen Thanks again, Thomas 1 Link to comment Share on other sites More sharing options...
Share Posted December 2, 2021 Hi @Thomas Günther Did you fix the issue? I'm not able to reproduce the problem anymore with your latest version. Link to comment Share on other sites More sharing options...
Author Share Posted December 3, 2021 Hey @OSUblake No, I could not fix the issue yet. Just open the CodePen with the bottom anchor link and scroll up: https://cdpn.io/medienbaecker/debug/BawyeQz#bottom Link to comment Share on other sites More sharing options...
Solution Solution Share Posted December 3, 2021 How about this? See the Pen xxXGBPb by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted December 3, 2021 @OSUblake So clever yet so simple. Thanks a lot, this works just fine! 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