[SOLVED] Custom cursor's position moves when scrolling upward

Custom cursor's position moves when scrolling upward

I'm making a custom hover cursor on my video div but it's not moving with my mouse stays at its position when I scroll, Can you all take a look at my code and tell me what am I doing wrong. And one more thing that when I remove the loading animation from my video tag it goes back to normal but if my mouse cursor is inside the (#play) it will stick to my mouse and wont disappear until I move my mouse outside of it even thought I have put the mouse enter, leave and move on my (#video-container) and sorry for my poor English, Thanks.

function loadingAnim() {
  gsap.from("#page1 h1", {
    y: 100,
    opacity: 0,
    delay: 0.5,
    duration: 0.9,
    stagger: 0.2,
  });

  gsap.from("#page1 #video-container", {
    y: 100,
    opacity: 0,
    delay: 1.5,
    duration: 0.9,
  });
}

loadingAnim();

function videoCursor() {
  var videocon = document.querySelector("#video-container");
  var playbtn = document.querySelector("#play");

  videocon.addEventListener("mouseenter", () => {
    //   playbtn.style.opacity = 1;
    //   playbtn.style.scale = 1;
    gsap.to(playbtn, {
      scale: 1,
      opacity: 1,
    });
  });

  videocon.addEventListener("mouseleave", () => {
    gsap.to(playbtn, {
      scale: 0,
      opacity: 0,
    });
  });

  videocon.addEventListener("mousemove", (dets) => {
    gsap.to(playbtn, {
      left: dets.clientX - 60,
      top: dets.clientY - 60,
    });
  });
}

videoCursor();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gilroy-Medium", sans-serif;
}

*::selection {
  color: #fff;
  background-color: #000;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#page1 {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  padding: 0 1.5vw;
  padding-top: 20vh;
}

#page1 h1 {
  font-size: 15.9vw;
  font-family: futura;
  text-transform: uppercase;
  line-height: 14vw;
  letter-spacing: -0.5vw;
}

#video-container {
  height: 100vh;
  width: 95vw;
  background-color: gray;
  margin-top: 2vw;

  position: relative;
}

#video-container video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#video-container #play {
  position: fixed;
  padding: 3vw 2vw;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-family: futura;
  font-size: 1.5vw;
  border-radius: 50%;
  opacity: 0;
  scale: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="main">
        <div id="page1">
            <h1>Change</h1>
            <h1>the course</h1>
            <div id="video-container">
                <div id="play">
                    PLAY
                </div>
                <video autoplay muted loop src="./video.mp4"></video>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
        integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
</body>

</html>

Solution

Fixed it!, By moving the cursor div outside of the wrapper ("#main") on which smooth scrolling is applied. Because position fixed don't work perfectly inside the wrapper on which smooth scrolling is applied.