Cursor Delay Code

Custom code
1

Hi All,

I have been trying to use this code i found on code pen When i try to use it, a preview of the cursor shows up in the top left corner of the page (i expect it is because of the CSS- fixed top left) but when i change this on the code pen its entirely different so I’m unsure what to do. Here is a link to my homepage for reference. Please, any help would be so greatly appreciated.

<style>
#cursor {
  pointer-events: none;
}
#cursor .cursor-circle {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}
#cursor .cursor-circle circle {
  fill: #a18248;
}
</style>

<div id="cursor">
  <div class="cursor-circle circle-big">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>
  <div class="cursor-circle circle-small">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
    </svg>
  </div>
</div>

<script>
  const cursor = document.getElementById("cursor");
const cursorBallBig = document.querySelector(".circle-big");
const cursorBallSmall = document.querySelector(".circle-small");

let posS = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
let posB = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
let mouse = { x: posS.x, y: posS.y };
const speed = 0.1;
let fpms = 60 / 1000;

window.addEventListener("mousemove", (e) => {
  mouse.x = e.x;
  mouse.y = e.y;
});

const xSetBallSmall = gsap.quickSetter(cursorBallSmall, "x", "px");
const ySetBallSmall = gsap.quickSetter(cursorBallSmall, "y", "px");
const xSetBallBig = gsap.quickSetter(cursorBallBig, "x", "px");
const ySetBallBig = gsap.quickSetter(cursorBallBig, "y", "px");

gsap.ticker.add((time, deltaTime) => {
  let delta = deltaTime * fpms;
  let dt = 1.0 - Math.pow(1.0 - speed, delta);

  posS.x += mouse.x - posS.x;
  posS.y += mouse.y - posS.y;
  posB.x += (mouse.x - posB.x) * dt;
  posB.y += (mouse.y - posB.y) * dt;
  xSetBallSmall(posS.x);
  ySetBallSmall(posS.y);
  xSetBallBig(posB.x);
  ySetBallBig(posB.y);
});
</script>