Change backgroundcolor on scroll

[Daniel Hult]

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

[Richard1604]

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.

[akapowl]

 

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 ff7dabf8f0946c406bdc61487b4f3f04 by akapowl (@akapowl) on CodePen

 

 

 

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

 

 

[Daniel Hult]

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