Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Hult

Change backgroundcolor on scroll

Recommended Posts

Hey,

Im trying to animate the background color of the whole container smoothly as you scroll. So im trying to make it go like this:

Initial color is set on the container, as soon as you start to scroll horizontally the first background color should start animating and stop halfway, then animate to the next color until the end of the container. Im seeing some issues with flickering on the background and not a smooth transition. I know my code is not very performant at the moment either (I guess).

Would greatly appreciate some help on how to structure the code to keep it more maintainable. Im guessing making a scrolltrigger to each separate .to is not very performant either :) 

See the Pen QWNYpXK by daniel-hult (@daniel-hult) on CodePen

Link to post
Share on other sites

hi daniel,

i just had a play with a copy of your codepen  and it seems to be a lot better if you use hex values for your colors instead of names.

I had a similar issue recently changing the background colors and that was the advice that I was given and worked for me.

  • Like 1
Link to post
Share on other sites

 

Hey @Daniel Hult

 

You are making one of the most common ScrollTrigger mistakes here:

 

Nesting ScrollTriggers inside multiple timeline tweens
A very common mistake is applying ScrollTrigger to a bunch of tweens inside a timeline. This doesn’t make much sense because both the timeline and the ScrollTrigger would try to control the tweens' playhead. It's best to apply a ScrollTrigger to either a standalone tween or to a parent timeline.

 

 

 

 

 

 

You could do what you tried above by just having 1 ScrollTrigger and adjusting the durations and offsets of the single tweens in that timeline accordingly.

 

See the Pen KKzJqyJ by akapowl (@akapowl) on CodePen

 

 

 

Also note, that I changed your color-names to hex-values, just as Richard1604 mentioned above :)

 

 

  • Like 4
Link to post
Share on other sites

Ahhh, it's so simple when I see it. Very helpful! Thanks :D 

Link to post
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.

×