Анимация при скролле (смена кадров)

Пытаюсь сделать анимацию при скролле. Есть два варианта - видео и смена картинок. Пробовал через видео и смену тайминга при скролле - вроде ок, но дерганно почему-то. Решил сделать через смену кадров при скролле - http://nevatrade.piterweb.com/test-img.html Вроде ок, но только на маке и с тачбаром. А вот если мышкой или на винде, то смена кадров не плавная, а резкая и дерганная. Пробовал добавить свойство scroll-behavior: smooth; - не помогло. Может есть какие-то идеи/мысли, как можно на винде/мышке сделать плавную смену кадров?

Код скрипта:

var totalImages = 1600;
var images = [];
for(var i = 765; i < totalImages; i++) {
  var filename = 'neva_trade';
  if(i < 1000) filename += '0';
  filename += i + '.jpg';
  var img = new Image;
  img.src = 'animation_002/' + filename;
  images.push(img);
}
var canv = document.getElementById('background');
var context = canv.getContext('2d');

var currentLocation = 0;

var setImage = function (newLocation) {
  context.drawImage(images[newLocation], 0, 0, 1280, 720);
}
var wheelDistance = function(evt){
  if (!evt) evt = event;
  var w=evt.wheelDelta, d=evt.detail;
  if (d){
    if (w) return w/d/40*d>0?1:-1; // Opera
    else return -d/3;              // Firefox;         TODO: do not /3 for OS X
  } else return w/20;             // IE/Safari/Chrome TODO: /3 for Chrome OS X
};
var wheelDirection = function(evt){
  if (!evt) evt = event;
  return (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;
};

var MouseWheelHandler = function (e) {
  e.preventDefault(); // No scroll

  // The following equation will return either a 1 for scroll down
  // or -1 for a scroll up
  var distance = wheelDistance(e);
  var direction = wheelDirection(e);

  // This code mostly keeps us from going too far in either direction
   currentLocation -= Math.round(distance*1.9);
  if(currentLocation < 0) currentLocation = 0;
  if(currentLocation >= images.length)
    currentLocation = images.length - 1;

  // See below for the details of this function
  console.log("currentLocation", currentLocation, distance);
  setImage(currentLocation);
};
var canvasFillWin = function(e) {
  var h = 720;
  var w = 1280;
  var ratio = h/w;
  var winW = $(window).width();
  var winH = $(window).height();
  var winRatio = winH / winW;
  
  if(winRatio > ratio) {
    $(canv)
      .width(winH / ratio)
      .height(winH)
      .css({
        marginLeft: - winH / ratio / 2 + "px",
        left: "50%",
        top: "0",
        marginTop: "0"
      });
  } else {
    $(canv)
      .width(winW)
      .height(winW * ratio)
      .css({
        marginLeft: "0",
        left: "0",
        top: "50%",
        marginTop: - winW * ratio / 2 + "px"
      });
  }
  
}
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
window.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
window.addEventListener("resize", canvasFillWin, false);
setImage(1);
canvasFillWin();