Jump to content

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

Change backgroundcolor on scroll

Recommended Posts


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 comment
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 comment
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 ff7dabf8f0946c406bdc61487b4f3f04 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 comment
Share on other sites

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

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.