How to Animate Radial Gradient Backgrounds

[BattN]

Hi! I am new to GSAP and have been wracking my brain trying to figure this out.

 

I want the background of my website to seamlessly change colors in its radial gradient when scrolled to a different section of the website.  

My biggest roadblock so far has been calling the radial gradients in js using GSAP. I've tried storing the string in a variable and the background that way but it doesn't seem to work.

 

In my codepen, I've hardcoded the different gradients to the sections where they are supposed to be in HTML but ideally, I'd like to set these in js with GSAP.

See the Pen oNOYQPJ by duh-doi (@duh-doi) on CodePen

[GreenSock]

Welcome to GSAP, @BattN

 

There are many ways you could do that. Here's just one: 

See the Pen KKYNYgy?editors=0010 by GreenSock (@GreenSock) on CodePen

[BattN]

Wow! Thank you so much @GreenSock! I have a couple of questions on how you were able to achieve this:

 

In the JS file for 'let backg', how come you put "backgroundImage" instead of "background"? I initially thought it would be "background" because that how the radial gradient background is assigned in ".about_backg".

 

Also, how is .header_background_extender coming in to play here? I might be mistaken, but I don't see the class called outside of its declaration in the CSS file.

 

Thank you!

[GreenSock]

1 hour ago, BattN said:

In the JS file for 'let backg', how come you put "backgroundImage" instead of "background"? I initially thought it would be "background" because that how the radial gradient background is assigned in ".about_backg".

Because "background" is a combination of a bunch of different sub-properties. It's much cleaner to focus on exactly the one you need which is backgroundImage. 

 

1 hour ago, BattN said:

Also, how is .header_background_extender coming in to play here? I might be mistaken, but I don't see the class called outside of its declaration in the CSS file.

I have no idea - I didn't create that. Looks to me like it's useless. 

[BattN]

I seemed to have made '.header_background_extender', not used it for anything, and forgot about it 😅, sorry about that!

 

Thank you so much @GreenSock! This has cleared up a lot for me!

[GreenSock]

No problem! Happy to help. 

 

By the way, another option is to just create CSS variables for your various colors that you plug into your radial gradients, and then just animate those individual CSS variables in the tween(s). 

 

Have fun!