Search code examples
javascripthtmlcssgsap

How to change value of CSS variable as page scrolls gsap?

I have a css variable named --color. I want to change the value of this css variable as the page scrolls down. The scrolling of the page should "scrub" the value.

Example: --color starts out at rgb(255, 255, 255). As the page scrolls down, the value gets closer to and eventually reaches rgb(0, 0, 0) upon scrolling down all the way. When scrolling back up, the value should slowly advance back to rgb(255, 255, 255), reaching it by the time the page is scrolled up completely.

I have been trying to achieve this with GSAP but have yet to find any success, although I believe it must be possible with the library.

Solution

  • Sure, here you go:

    gsap.to("body", {
  "--color": "black",
  scrollTrigger: {
    start: 0,
    end: "max",
    scrub: true
  }
});

    https://codepen.io/GreenSock/pen/WNOzWaM?editors=0110

    By the way, there are dedicated GSAP forums at https://greensock.com/forums