Change Body Background Color on Scroll - ReactJS

[ICodeSleep]

I'm trying to change the background color of the whole body section in react but It doesn't seems to work. I'm getting warning in console like

Invalid property backgroundColor set to #444444 Missing plugin? gsap.registerPlugin() 

Any help would be appreciated.

PS: I'm new to GSAP and also I'm using tailwindcss

 

export default function Home() {
  
  let container = useRef();

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    gsap.to(container, {
      scrollTrigger: container,
      backgroundColor: "#444444",
    });
  });
  
  // Returning Components
  return (
    <>
      <main ref={container}>
        <HeroSection />
        <Projects />
        <About />
      </main>
    </>
  );
}

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi,

 

This is a starter codesandbox example that you can fork and adapt to look/work like your example so we can have a better look:

https://codesandbox.io/s/gsap-scrolltrigger-react-zrp6su

 

Also a few issues I  found in your code. You are not using the container ref properly and you don't need to register the GSAP plugin in the use effect hook, just do it outside the scope of the React function component:

gsap.registerPlugin(ScrollTrigger);

export default function Home() {
  
  let container = useRef();

  useEffect(() => {
    gsap.to(container.current, {
      scrollTrigger: container.current,
      backgroundColor: "#444444",
    });
  });
  
  // Returning Components
  return (
    <>
      <main ref={container}>
        <HeroSection />
        <Projects />
        <About />
      </main>
    </>
  );
}

https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs

 

I recommend you to get a good look at GSAP Context and how it simplifies working in React apps:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally take a peek at this article:

Happy Tweening!