I Am creating a portfolio website for me. The Issue is realated with GSAP ScrollTrigger Not Working.

I Am tring to create a scroll trigger animation that when i move to my next section it should turn it background to black from white but gsap scrolltrigger not working properly after trying still i can’t get the error resolve if any of you have any idea Please Provide me guidance…Here is my code.

HTML
<div class="page2 page"></div>

CSS

.page2 {
  background-color: #efeae3;
  height: 100vh;
  width: 100vw;
  align-items: center;
  display: flex;
  justify-content: center;
}

JS

gsap.registerPlugin(ScrollTrigger);

function squareMove() {
  let tk = gsap.timeline({
    scrollTrigger: {
      trigger: ".page2",
      scrub: true,
    },
  });

  tk.to(".page2", {
    backgroundColor:"#b1b1b1",
    duration: 1, 
  });
}
squareMove();