Jump to content
GreenSock

kevchcm

How to seamless change background color with gradient between section

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • Solution

 

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

 

 

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
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.
×