Jump to content
Search Community

Custom mouse lags after various page loads

Rocha test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...