Mouse Tracking Animation stutters with GASP 3.6

[TheCatalyst]

Hey all! So I'm new around here and really enjoying getting to know the ins and out of greensock. But now, I come to you all for some help. I've been working on a small boutique site where I have some mouse cursor tracking. I was previously using a combination of TweenMax and CSS and my animations were buttery smooth. However, when migrating over to gasp 3.6 the mouse tracking I have starts to stutter. I'm not sure if I'm overloading the animation engine, the browser, etc. I'm using the gasp.set instead of TweenMax.set as the mouse moves, then using css to move/animate the dot I have following the cursor. Should I be animating on page elements with Greensock, or using CSS to animate/tween and just gasp to 'set' values? Code samples below. Any help would be _greatly_ appreciate as I am more a designer than developer. But I enjoy being slightly dangerous on the code side. Ha! Many thanks!

 

var cursor = $(".cursor");
    var cursorStatic = $(".cursor-static");
    var firstMove = false;
    var posX = 0,
        posY = 0;
    var mouseX = 0,
        mouseY = 0;

    gsap.to({}, 0.016, {
      repeat: -1,
      onRepeat: function() {
        posX += (mouseX - posX) / 5;
        posY += (mouseY - posY) / 5;

        gsap.set(cursor, {
            css: {
            left: posX - 2,
            top: posY - 2
            }
        });
        gsap.set(cursorStatic, {
            css: {
            left: mouseX,
            top: mouseY
            }
        });
      }
    });

    $(document).on("mousemove", function(e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
        if(firstMove == false) {
            cursor.css({ opacity: 1 });
            firstMove = true;
        }
    });

 

[mikel]

Hey @TheCatalyst,

 

Welcome to the GreenSock Forum.

 

Even an old fish could swim perfectly alive.

 

See the Pen 971327b0619dae7bdd3d3d606ebe313c?editors=1010 by mikeK (@mikeK) on CodePen.

Please split your case - reduced to the problem - in a CodePen.

 

Happy tweening ...

Mikel

 

[TheCatalyst]

@mikel You're the best! I've spent days reading your posts and replies so I feel honored that you responded to me directly.  That's perfect. I think I was overcomplicating the animations based off an old TweenMax example I had found. I also came across this one after more digging: 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen.

 

Thank you again!

[ZachSaucier]

1 hour ago, TheCatalyst said:

Should I be animating on page elements with Greensock, or using CSS to animate/tween and just gasp to 'set' values?

Using CSS to animate your values will not be more efficient. 

 

Some tips:

• You should avoid animating top and left. Using x and y instead. This is probably the main source of any jankiness.
• You don't need the css: {} wrapper.
• We recommend including the duration inside of your tween vars.
• You might be interested in GSAP 3's quickSetter method.