How to seamless change background color with gradient between section

[kevchcm]

Hello, I'm working with scrolltrigger and I'm trying to create a background color from white to blue when the users scrolls. The problem is that I want that transition to be very smooth but the results I have it's that the blue color appears once the trigger starts.

 

This website show an example of what I am trying to do https://demosnappy.webflow.io/product

 

Here is a video as well

See the Pen zYKrqbY by godhandkiller (@godhandkiller) on CodePen

[akapowl]

Hey @kevchcm

 

You could hook the ScrollTrigger up to a tween instead of firing tweens in the callbacks, and add a scrub to the ScrollTrigger.

By setting an end, you can also define, how long ( and thus ) how smooth the transition from one color to the other should be.

 

See the Pen 4bbf3966ed429f0b0a5dade925af964d by akapowl (@akapowl) on CodePen

 

Hope this helps.

Cheers,

Paul

[kevchcm]

22 minutes ago, akapowl said:

Hey @kevchcm

 

You could hook the ScrollTrigger up to a tween instead of firing tweens in the callbacks, and add a scrub to the ScrollTrigger.

By setting an end, you can also define, how long ( and thus ) how smooth the transition from one color to the other should be.

 

 

 

 

Hope this helps.

Cheers,

Paul

 

Paul, thank you so much for your answer, it's exactly what I needed and sorry for my ignorance, but how can I achieve the same thing when the user scroll past the test, so now will go from blue to white

 

This is the udpated code

[akapowl]

 

I don't know, which test you are referring to, but (if I understand you correctly, and on further scroll you want to go back to white) you could just set up another ScrollTrigger with start and end to your liking with a scrubbing tween back from blue to white.

 

...probably best with an 'immediateRender: false' added to that tween.

 

See the Pen 4bbf3966ed429f0b0a5dade925af964d by akapowl (@akapowl) on CodePen

 

 

Or you could do it with a single ScrollTrigger and a timeline instead of the single tween. But depending on how and when exactly you want things to happen, that might be a bit trickier to wrap your head around.

 

See the Pen 2e6045659d2d803aef0f4ec659d71d40 by akapowl (@akapowl) on CodePen

 

 

[kevchcm]

25 minutes ago, akapowl said:

 

I don't know, which test you are referring to, but (if I understand you correctly, and on further scroll you want to go back to white) you could just set up another ScrollTrigger with start and end to your liking with a scrubbing tween back from blue to white.

 

...probably best with an 'immediateRender: false' added to that tween.

 

 

 

 

 

Or you could do it with a single ScrollTrigger and a timeline instead of the single tween. But depending on how and when exactly you want things to happen, that might be a bit trickier to wrap your head around.

 

 

 

 

 

I meant to say "text" instead of test, my bad.

Both solutions are great, I think I'm going with the first one, I think it gives me a little bit more control

 

I want to thank you again for your help!!