GSAP + ScrollTriger (change background color for each section, only two colors)

[TheVesta]

Hello! I need your help. I had difficulty writing a JS code for changing the background. I have only two colors, it's black and white. The first section should be black, the second section is white, the third section is black, the fourth section is white and so on. 

 

At the same time, I want the background to change smoothly when scrolling down. As it happens now for the first two sections.

 

Is it possible to do this?

See the Pen XWMKWxd by victor_trunov_ (@victor_trunov_) on CodePen

[akapowl]

Hey @TheVesta

 

There is multiple approaches to this - you could for example set up a large timeline with multiple tweens to handle the color changes as in this thread for example.

 

 

 

Or you loop over the sections and add some sort of logic of your own.

Like in this example I'm checking on the data-color attribute I added to the sections.

 

If it's 'dark', the backgroundColor for the wrap will tween to dark, else it will tween to light. Hope that helps.

 

Edit: You could use the same logical approach with a check on the classes you have on the sections.

I just like to do it with data-attributes

 

See the Pen 01371330dbdec800579a15bebd463bef by akapowl (@akapowl) on CodePen

 

 

 

 

[TheVesta]

9 hours ago, akapowl said:

Hey @TheVesta

 

There is multiple approaches to this - you could for example set up a large timeline with multiple tweens to handle the color changes as in this thread for example.

 

 

 

Or you loop over the sections and add some sort of logic of your own.

Like in this example I'm checking on the data-color attribute I added to the sections.

 

If it's 'dark', the backgroundColor for the wrap will tween to dark, else it will tween to light. Hope that helps.

 

Edit: You could use the same logical approach with a check on the classes you have on the sections.

I just like to do it with data-attributes

 

Oh, Thank you, you really helped me!

 

Can I do so that the color of the text change relative to the background? If the background becomes gradually black, then the text should become gradually white.

[akapowl]

5 hours ago, TheVesta said:

Can I do so that the color of the text change relative to the background? If the background becomes gradually black, then the text should become gradually white.

 

Sure you can. Since it will probably have to be affecting any text anyways, you could just add a tween on the color of the wrap with the same logical approach but inverted values to that existing ScrollTrigger creation in my example - but you'd have to get rid of all further specified declarations of the color in your CSS - which here would only be the .color-dark { color: #fff } - or otherwise the tween on the .wrap's color would have no effect.

 

See the Pen 75cdae7e7240b9a2965f3276518b587a by akapowl (@akapowl) on CodePen

 

[taskovv_]

On 5/15/2021 at 11:11 PM, akapowl said:

 

Sure you can. Since it will probably have to be affecting any text anyways, you could just add a tween on the color of the wrap with the same logical approach but inverted values to that existing ScrollTrigger creation in my example - but you'd have to get rid of all further specified declarations of the color in your CSS - which here would only be the .color-dark { color: #fff } - or otherwise the tween on the .wrap's color would have no effect.

 

 

 

 

This is great but it's not smooth on mobile at all, any way to fix that?

[akapowl]

15 minutes ago, taskovv_ said:

This is great but it's not smooth on mobile at all, any way to fix that?

 

It's perfectly smooth for me - but I might be misunderstanding what it is you mean by that, so maybe it can help if you could elaborate a bit.

[taskovv_]

6 minutes ago, akapowl said:

 

It's perfectly smooth for me - but I might be misunderstanding what it is you mean by that, so maybe it can help if you could elaborate a bit.

Try entering https://econ.agency/ from mobile and notice how laggy it is when you scroll fast from top to bottom and back.

There is no such problem on Desktop.

[akapowl]

 

I see what you mean, but we can not debug live-websites, it's just not feasible - there is too much involved outside of GSAP/ScrollTrigger that could be causing your problems.

 

The best suggestion I can give you right now is to narrow down things by stripping down bit by bit until the point where it runs smoothly - and then add things back to see at which point it becomes problematic.

 

[taskovv_]

2 minutes ago, akapowl said:

 

I see what you mean, but we can not debug live-websites, it's just not feasible - there is too much involved outside of GSAP/ScrollTrigger that could be causing your problems.

 

The best suggestion I can give you right now is to narrow down things by stripping down bit by bit until the point where it runs smoothly - and then add things back to see at which point it becomes problematic.

 

Good advice, thank you.

I will try that right away.

[taskovv_]

3 minutes ago, akapowl said:

 

I see what you mean, but we can not debug live-websites, it's just not feasible - there is too much involved outside of GSAP/ScrollTrigger that could be causing your problems.

 

The best suggestion I can give you right now is to narrow down things by stripping down bit by bit until the point where it runs smoothly - and then add things back to see at which point it becomes problematic.

 

Can you please give me the link to your website, thank you.

[akapowl]

2 minutes ago, taskovv_ said:

Can you please give me the link to your website, thank you.

 

What website?

[taskovv_]

4 minutes ago, akapowl said:

 

What website?

The website that you use the code above, you mentioned earlier that it's perfectly smooth for you but do you have it somewhere or just on codepen?

[akapowl]

 

On codepen only - but usually when something runs smooth on codepen, but not on your website, it's something else on your website causing issues.