0

I want my cursor to be followed by a circle with a short delay. The problem is that it works really smoothly on Firefox while being very laggy on Chrome.

JS:

const cursor = document.querySelector('.cursor');

window.addEventListener('mousemove', moveCursor);

function moveCursor(e) {
   cursor.style.top = e.clientY + "px";
   cursor.style.left = e.clientX + "px";
}

CSS:

.cursor {
   width: 30px;
   height: 30px;
   position: absolute;
   transition-duration: 200ms;
   transition-timing-function: ease-out;
}

I'm having a hard time cracking the code here and would appreciate some help on this matter. Also, I'm using Locomotive scroll but it shouldn't be a problem seeing that Firefox works as intended with the same code.

Matei Cananau
  • 75
  • 7
  • Using your code as above I don't notice much of a lag on Chrome compared to FF, but I did notice Chrome using more CPU and FF used about 50% more GPU for a similar continuous moving test. Is other code having an affect? – A Haworth Feb 20 '21 at 16:20
  • @AHaworth There must be a a bad link between Chrome and Locomotive Scroll. It is however weird that Firefox functions perfectly while Chrome doesn't with the exact same code. Maybe Chrome is more CPU heavy and FF more GPU? – Matei Cananau Feb 21 '21 at 11:27

0 Answers0