Custom mouse lags after various page loads

[Rocha 1 Likes (Newbie)]

Hi there,

 

I noticed that after going from one page to another the custom mouse starts to lag. At first it's hard to notice but as you load 4 or 5 pages the mouse doesn't flow as smoothly as on the first page load.

 

Am I missing anything that is making the mouse lags? I'm using Barba JS on the site so I'm not sure if I have to kill and restart the mouse function every time I transition between pages?

 

Here's the link to my project:
https://codepen.io/rochudo/project/editor/ZgGnON

Thanks

See the Pen ZgGnON by rochudo (@rochudo) on CodePen

[GreenSock 18,876 Likes (Superhero)]

I don't have time to troubleshoot your whole project with various other frameworks that may be causing conflicts, but I can offer a few pointers: 

1. Make sure you're killing things off properly between pages. I bet you keep starting a requestAnimationFrame() loop over and over again on every page and it's building up and causing a very heavy load with conflicts and redundancies. 
2. This is very inefficient: 

   // not good
   function mouseMove(e) {
       gsap.to(jsCursorCircle, { duration: 0.5, x: xPos, y: yPos });
       gsap.to(jsCursorDot, { duration: 0.2, x: xPos, y: yPos });
       requestAnimationFrame(mouseMove);
   }

   Roughly 60 times per second you're creating a new conflicting tween and you don't have overwrite: true set, so you'll end up having a ton of tweens running on the same thing simultaneously. At the very least, set overwrite: true on your tweens. 
   
   I wouldn't use a requestAnimationFrame() either. You only need to run things when the pointer moves, right? And how are you killing that loop when you go to another page? (see #1)
   
   It's a bit more efficient to reuse the same tween instance in a case like this where you're doing a TON of them constantly:

   const cTween = gsap.to(jsCursorCircle, {duration: 0.5, x: xPos, y: yPos});
   const dTween = gsap.to(jsCursorDot, {duration: 0.2, x: xPos, y: yPos});
   
   function mouseMove(e) {
     cTween.invalidate();
     dTween.invalidate();
     cTween.vars.x = dTween.vars.x = xPos;
     cTween.vars.y = dTween.vars.y = yPos;
     cTween.restart();
     dTween.restart();
   }

    

I hope that helps. 

[Rocha 1 Likes (Newbie)]

Thanks for pointing me in the right direction.

I thought requestAnimationFrame() was very efficient but it may be only necessary when something needs to run constantly so cheers for that

Before I leave the page I'm killing the events like this:

document.removeEventListener('mousemove', mouseMove, false);
cancelAnimationFrame(mouseMove);

And load the events back in this way

document.addEventListener('mousemove', mouseMove, false);

Is that the most efficient way to handle things you reckon?

Previously, I had xPos and yPos variables in another function but I've now moved them inside of mouseMove()

function mouseMove(e) {
    xPos = e.clientX;
    yPos = e.clientY;
    cTween.invalidate();
    dTween.invalidate();
    cTween.vars.x = dTween.vars.x = xPos;
    cTween.vars.y = dTween.vars.y = yPos;
    cTween.restart();
    dTween.restart();
}

Does that look right to you or should I keep those variables outside the function?
 

I implemented your suggestions and the mouse seems to flow nicely no matter how many pages you visit.

[GreenSock 18,876 Likes (Superhero)]

I'm really pressed for time - it sounds like you got it all working smoothly, right? If so, great. If you still have GSAP-specific questions/issues, feel free to ask those. 

 

Happy tweening!

[Rocha 1 Likes (Newbie)]

No worries. Thanks a lot for helping out!