HTML5 Canvas Image Cross Fade Animation (GSAP)

Question

Я новичок в HTML5 Canvas и пытаюсь добиться эффекта перекрестного затухания между двумя изображениями (используя GSAP) на холсте HTML5. Я могу по отдельности fadeIn и fadeOut, но если я попытаюсь смешать два эффекта вместе, это не сработает.

Если вы запустите мой фрагмент и быстро перейдете между двумя делениями, вы заметите, что изображения резко меняются. (Тем не менее, если вы зависаете на 1 div и выходите, не зависая на другом div, он просто гаснет).

Я хочу объединить fadeIn и fadeOut для достижения эффекта перекрестного замирания (точно так же, как это https://stackoverflow.com/a/33560604/3565182) НО с анимацией GSAP.

Помощь будет оценена.

let backgroundCanvas = $('#background-canvas')[0];
let canvasContext = backgroundCanvas.getContext('2d');

/* setting height and width */
backgroundCanvas.height = 100;
backgroundCanvas.width = 150;

/* setting up images */
let image1 = new Image();
let image2 = new Image();

image1.src = "http://lorempixel.com/500/300?22";
image2.src = "http://lorempixel.com/500/300?44";

/* confirm image load */
image1.onload = () =>  $('body').append('Image 1 loaded -- ');
image2.onload = () =>  $('body').append('Image2 loaded -- ');


let currentImage;
let imageId;
let backgroundImageProps = {
  opacity: 0
};

/* on hover */
$('.show-image').mouseenter(function() {
  imageId = $(this).attr('id');
  
  if (imageId == '1')
    currentImage = image1;
  else
    currentImage = image2;

  /* from opacity 0 to 1 */
  TweenLite.to(backgroundImageProps, 2, {
    opacity: 1,
    ease: Power4.easeOut,
    onUpdate: function() {
      drawImage(currentImage)
    }
  });

});

/* on hover end */
$('.show-image').mouseleave(function() {

  let imageToHide = currentImage;
  
  /* from opacity 1 to 0 */
  TweenLite.to(backgroundImageProps, 2, {
    opacity: 0,
    ease: Power4.easeOut,
    onUpdate: function() {
      drawImage(imageToHide)
    }
  });

});

/* canvas drawing logic */
function drawImage(imageToDealWith) {
  let image = imageToDealWith;
  canvasContext.save();
  canvasContext.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height, 0, 0);
  canvasContext.globalAlpha = backgroundImageProps.opacity;
  canvasContext.drawImage(image, 0, 0, image.width, image.height, 0, 0, backgroundCanvas.width, backgroundCanvas.height);
  canvasContext.restore();
}

canvas {
  display:block;
}
div {
  display: inline-block;
  border:1px solid black;
  margin:10px;
  padding:10px;
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenLite.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="background-canvas"></canvas>

<div class="show-image" id="1">Image 1 (Hover)</div>
<div class="show-image" id="2">Image 2 (Hover)</div>