It is possible to request animations to run at a rate faster than 60 frames a second (screen scroll events do this). This is an issue as the typical browser updates (‘repaints’) the screen at 60 frames a second. If multiple animations are requested before the screen updates it can lead to jerky looking animations. The solution is to throttle the animation and only change it when the screen is due to be updated.

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint.

var scheduledAnimationFrame;
var lastScrollY;

function onScroll() {
  // Add your custom code

  scheduledAnimationFrame = false;
}

window.addEventListener('scroll', function () {
  // Store the scroll value
  lastScrollY = window.scrollY;

  // Prevent multiple requests within the same screen refresh cycle
  if (scheduledAnimationFrame) {
    return;
  }

  scheduledAnimationFrame = true;
  
  // Use requestAnimationFrame to run your function
  // at your screen refresh rate
  requestAnimationFrame(onScroll);
});