Improving Jquery animations when scrolling

[rpeg]

I’m implementing some jQuery animations. I’m using it in conjunction with a plugin called Waypoints.js. Some animations occurs on scroll down while others occur when you scroll up. These animations become confused and messy when you scroll through it quickly. I’m new to using jquery animations and I’m wondering how to prevent the animations from occurring at all when a user scrolls too quickly. Or is there another way around this? Are .queue()'s relevant to this situation?

[AussieJohn]

Hi rpeg,

You could try throttling the number of events that get sent by scrolling. I gather you’d be watching the window scroll event (e.g. $(window).on('scroll', callback);). One way to avoid animations occurring too frequently is either throttling or debouncing the callback function. For scrolling, generally throttling is better (throttling causes an event to only occur every n milliseconds at most, and debouncing will only fire n milliseconds after events stop, an excellent article here explains it).

If you are already using either the Underscore or Lodash libraries, you can create a throttled function quite easily

var throttledFn = _.throttle(function(e) { 
    // fire your jQuery animations
}, 50);

If you’re not, there is also a jQuery plugin that provides a throttle/debounce method for jQuery.

Hope this helps