Jump to content
Search Community

ScrollTrigger color animation only works top to bottom

Thomas Günther test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

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

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...