I'm working on a simple game project and playing around with jQuery to do some animations.
For some reason, the smoothness and consistency of the animations correlate to how 'active' the webpage is. If I keep the mouse idle on the webpage, the animation is choppy, unresponsive, and the second animation often doesn't play.
Additionally, if I keep the mouse very active on the page, the animation plays pretty smoothly.
Heres a short video album of the effect I'm seeing
https://i.stack.imgur.com/PRJ4W.jpg
The following code is what I'm using to animate the divs:
window.setTimeout(function() {
$("#blue_button").animate({"margin-left" : "100px"}, 5000, 'easeOutElastic', function() {
// enable mouse events
$("#blue_button").css({"pointer-events" : "all"});
// bring in the text desription
var rect = $("#blue_button")[0].getBoundingClientRect();
$("#text_div").animate({"margin-left" : rect.right + 80 + "px"}, 700, 'easeOutQuint');
});
}, 6000);
I'm using jQuery 3.3.1 and jQuery Easing 1.3 (a plugin with custom easing functions)
I still see the playback issues when using a default jQuery easing.
I'm using Chrome 69.0.3497.100 on Windows 10. I see the same behavior when using a vanilla Microsoft Edge as well. Also when using my Laptop with the same chrome/windows.
Thanks
Edit:
I've worked around this by using the transition jquery extension. It works quite well.
