Animation performance

The first one is the example that works great - hovering over anywhere on the page and you get a crosshair that is slightly behind the cursor, and not choppy. I see they animate the transform to make the div follow the cursor around. I have my codepen that doesn’t quite follow the exact setup that the link does, but it works. The animation isn’t quite great in terms of performance. It’s a little choppy and not super smooth.

I tried throwing in velocity.js and it did not help performance (it turned the animation into super-slow motion. I ended up scrapping it). Did I put velocity in wrong (I can throw that back in)? Is there some other way to handle this animation? I know CSS animations are better but I can’t add in transitions in CSS due to the Javascript then grabbing incorrect top/left coordinates :frowning: .

Hi @RyanReese, I think I got it to work smoothly by adding some throttling and modifying the animation duration, try this:

var timeout = null;
_.addEventListener("mousemove", function(e) {
    mouseXY = movingDiv.getCoords(e);
    if (!timeout) {
        timeout = window.setTimeout( function() {
                left: mouseXY.xp + "px",
                top: mouseXY.yp + "px"
            }, 200, "linear");      
            timeout = null;
        }, 100);

The throttling prevents the animation firing on every frame as the mouse moves, as you’d want to allow it to complete before firing another one.
And then I’ve adjusted the animation duration to account for the throttling and allow it time to execute.
Maybe now you can add some easing to the animation instead of making it linear if you wish… and you may play with the timeout and animation duration values to make it work best.

Hope that helped.


I’ve forked it so you could see it in action:


Thank you Andres! I do see a small issue where if you quickly swap between items, the bubble jumps to a different position, vs on the old version it doesn’t do that. This is great stuff though, thank you :slight_smile: . Do you have an idea on that issue? The timeout seems to be the issue.

Hi Ryan, I think it’s fixed now, check:
All I did was move mouseXY = movingDiv.getCoords(e); inside the timeout function.
Let me know if that is what you were after.

Edit: have also added a timeout in the mouseleave so that it actually works, otherwise it will be overriden by the mousemove timeout. I think it’s working well now.


Actually this was not the solution for that problem, how I ended up fixing it is by making mouseXY a property of cursor in order to keep it in context, because otherwise it was getting the coordinates of the wrong circle once you made a quick switch from one to the other.
It’s all fixed in the code pen above.

1 Like

Just as a small addendum, a good means for animation related throttling is requestAnimationFrame(), which schedules the function call to when the browser is going to repaint anyway (rather then to a fixed delay):

var request = window.requestAnimationFrame(function () {
  // ...
  request = null

BTW that’s also what used to make velocityjs’ animations more performant than jQuery’s, but since 3.0 jQuery uses rAF as well… so it’s ideal to use here for a smooth animation flow. :-)

1 Like

Hey @m3g4p0p I did think of this approach the first time but couldn’t get it to work properly. I was wondering… if you don’t know the frequency of requestAnimationFrame how are you going yo know a proper duration for your animation?
Anyway if you got it to work that way please share it with us.


I’d just use it as a drop-in replacement for setTimeout()… as for the animation duration, I don’t think that matters here as it’s only playing while the mouse isn’t moving anyway – otherwise it’s getting interrupted either way. E.g. compare 50ms vs 750ms using rAF:

PS: But if I’m mistaken and it does matter, the frequency should be roughly 60 times per second.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.