Animation gets slugish over time

[jeromeFlux]

Hi,

 

I just recently started fooling around with tweenlite and ran into the following problem: 

I've made an animation where nodes gravitate towards the mouse when it gets near. When the mouse gets too far from a node, it snaps back into place. The nodes are connected and stay connected when they move. The animation works fine when the window first loads, but starts to feel sluggish when you play with it for a while. The strange thing is that each node seems to have it's own tolerance => If you play with one node until its fps drops and move to a different one, it won't have any problems. the tolerance doesn't reset itself after time either, once sluggish it stays sluggish. Do tweens keep some kind of history that needs to be reset or what am I doing wrong?

 

Thanks in advance,

Jerome

See the Pen PLKgZw by jerome-de-wulf (@jerome-de-wulf) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. That's quite a bit of code to go through.

I think the biggest issue is that you are asking the browser to do a ton of work on each mousemove and mousemove fires at a super fast rate.

 

Please add a log to one of your mousemove functions like

 

function moveCircle(e) {
    console.log("move")
    TweenLite.to($circle, 0.7, {
      css: {
        left: e.pageX - $(".tween-container").offset().left,
        top: e.pageY - $(".tween-container").offset().top
      },
      z: 0.1
    });

 

Open the browser console and move the cursor around the element. You could see "move" log out a hundred times moving just a tiny distance in a short amount of time.

 

On each move you creating a bunch of tweens on a bunch of svg elements and then instantly killing all those tweens and creating new ones on the next move.

 

Please read this article on throttling and debouncing to learn how to limit how often you create new tweens: https://css-tricks.com/the-difference-between-throttling-and-debouncing/

 

 

Although not the biggest problem, you will get better performance using transform values like x and y instead of top and left when moving divs

 

--

 

I did notice that certain nodes do get sluggish independently and do kind of stay that way. I don't have an explanation for that.

 

 

[GreenSock]

I noticed several things...

 

1) (This is likely the biggest culprit of the gradual slowdown): 

 

 $($wrapper).mouseover(function() {
    flag = true;
    $($wrapper).on("mousemove", moveCircle);
  });

 

This means that every...single...time you mouse over something, you're adding ANOTHER mousemove event handler....again...and again...and again. So it's compounding the problem over time. The first time you mouse over something, you've got one handler. The second time, you've got two handlers being called on every mousemove...and so on. Eventually you're calling moveCircle a CRAZY amount of times. 

 

You should make sure you remove your mousemove handler(s) on mouseout or something. Like Carl suggested, try putting a console.log() in your mousemove handlers and you may be shocked by how many times they're getting called. 

 

2) The code is highly inefficient. Not only are you animating "top" and "left" instead of "y" and "x" (transforms are typically much more performant because they don't affect document flow), but you're calling things like $(".tween-container").offset().left multiple times from within a mousemove handler. Like Carl said, you should be VERY careful about mousemove handlers to begin with because they're called a TON, but every time you call $(".tween-container").offset().left it has to not only search the whole DOM to find that element, but it also has to calculate the offset which is expensive for the browser to do. It'd be much better to do the lookups ONCE, store them as variables and reuse them in your code. 

 

3) Another big red flag in your CSS: 

 

transition: all .3s ease;

 

That can cause major problems because the way CSS transitions work is that anytime you make ANY change to the value, the CSS is like "WAIT! Don't make that change right away...I'm gonna drag that out over 0.3 seconds", and keep in mind that GSAP edits properties roughly 60 times per second. So EVERY time GSAP updates something, the CSS is interfering and making things look like they're slower than they should be. 

 

It's probably not a big deal in your particular case because from my cursory glance it's just for the button rollover state, so it's not affecting all the elements that are animating, but I figured I'd mention it anyway just so you're aware. 

 

4) The code seems to have a LOT of repetition. This isn't necessarily a performance issue - I just wanted to point out that if you find yourself copying/pasting code for each orb (or whatever), it's likely that you can write a function that'll make things far more efficient. That way, if you want to tweak the timings or whatever, you just do it in one place rather than having to scroll through and find every piece of related code for each and every orb. 

 

I hope that helps. Happy tweening!

[jeromeFlux]

Hi Jack and Carl,

 

thanks a ton for your answers. I'm aware of the firerate of mousemove and the horrible code i've written, but neither cause the gradual slowdown which left me so confused. Thank you Jack for pointing me to the culprit, changing the code to something like this solved the problem. Now I can move on to cleaning up the code

 

$($wrapper).mouseover(function() {
    flag = true;
  });

  $($wrapper).on("mousemove", function(event) {
    if (flag) {
      moveCircle(event);
    }
  });

 

Thanks again,

Jerome