Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TheVesta

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

Go to solution Solved by akapowl,

Recommended Posts

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

Link to post
Share on other sites

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

 

 

 

 

  • Like 4
  • Thanks 1
Link to post
Share on other sites
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.

Link to post
Share on other sites
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

 

  • Like 3
  • Thanks 1
Link to post
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.

×