How to smoothly change scene background color

Questions
,
1

Hi, I am trying to make my scene background color to change smoothly to linear gradient when I scroll through 50% of page content (in my scroll event listener):
https://codesandbox.io/s/broken-bash-z8qgi3?file=/src/index.js
The problem is that the change is immediate, I wanna change it smoothly.

2

Define black as the default background color like so:

scene.background = new THREE.Color(0x000000);

In your scroll even listener, do this instead of directly setting the color to red:

 gsap.to(scene.background, {
      duration: 2,
      r: 1,
      g: 0,
      b: 0
    });