Locomotive scrollbar turning white when i reach the end point

Question

I'm making a website with the help of using locomotive (smooth scroller) and gsap scrolltrigger, Trying to change the position of my headings and the size of video on scroll which is working perfectly fine but when i reach the end point of my page my scroller turns into something like white colored or white. I'm so confused why is it happening.

Here is my code can u guys take a look and tell me if I'm doing anything wrong.

.page1 {
  min-height: 100vh;
  width: 100vw;
}

.page1 h1 {
  font-size: 8vw;
  font-weight: 300;
  font-family: PP mori;
  margin-top: 12vw;
  margin-left: 6vw;
}

.page1 h2 {
  font-size: 8vw;
  font-weight: 300;
  font-family: PP mori;
  margin-left: 26vw;
}

.page1 video {
  width: 60%;
  margin-top: 10vw;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

And here's the JavaScript code.

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".page1 h1",
    scroller: ".main",
    markers: true,
    start: "top 27%",
    end: "top 0",
    scrub: 3,
  },
});

tl.to(
  ".page1 h1",
  {
    x: -100,
    //   duration: 1,
  },
  "anim"
);

tl.to(
  ".page1 h2",
  {
    x: 80,
  },
  "anim"
);

tl.to(
  ".page1 video",
  {
    width: "90%",
  },
  "anim"
);

Thanks in advance.