Javascript and Interaction not loading until browser refreshed

Hi everyone, I’m stuck on this topic. I have a compass arrow in the footer of my page that tracks the movement of the mouse position. It works great if it’s the first or second section of the site, but put it at the bottom of the page, and it doesn’t work as intended. The further down it goes, the worse it works. I’ve noticed that by refreshing the page, the interaction now works! I also built a page percentage indicator with a to-bottom button, and the page only loads 70%. I don’t know if the 70% load and arrow failure are related.

The JavaScript is located in the before body tag of the page settings.

Any help is greatly appreciated!

I’ve tried:

  1. Different browsers.
  2. Timeout Function at 300ms
  3. Document.onload instead of window.addEventListener

My site:
https://portfolio-site-1db50b.webflow.io/sage-advice

Designer Read Only Link:
https://preview.webflow.com/preview/portfolio-site-1db50b?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-site-1db50b&preview=e1061a81ef9796fcbecd84e0e7564d67&workflow=preview