Jump to content
Search Community

Change backgroundcolor on scroll

Daniel Hult test
Moderator Tag

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 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 7
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...