BattN Posted March 17 Share Posted March 17 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 18 Solution Share Posted March 18 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 1 Link to comment Share on other sites More sharing options...
BattN Posted March 18 Author Share Posted March 18 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! Link to comment Share on other sites More sharing options...
GreenSock Posted March 18 Share Posted March 18 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. 1 Link to comment Share on other sites More sharing options...
BattN Posted March 18 Author Share Posted March 18 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! Link to comment Share on other sites More sharing options...
GreenSock Posted March 18 Share Posted March 18 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now