Div with sprite-animation doesn’t change properly during window.resize event

Soo, I am trying to imitate 3d-model rotation with sprite-sheet. I found a perfect example on Codepen, but it was not responsive. What I tried to do is to write div’s, container’s and spritesize (in script) in ‘VW’. And then it is being checked on window.resize event. It does work, but unfortunately not DURING window resize. I put my snippet and three pictures in post — 1) I opened website and everything is perfect 2) I started to change the size of my browser window and as you can see something is wrong 3) Now I tried to “rotate” the “model” with resized window and all is fine again. Sorry, if the question is weird, I am only a beginner 🙁 the first image, the second and the third

var spriteslider = document.createElement('div');
var clientWidth = document.getElementById('spritetarget').clientWidth;

document.body.appendChild(spriteslider);

spriteslider.slider = document.getElementById('spriteslider');
spriteslider.sprite = document.getElementById('spritetarget');
spriteslider.spritesize = clientWidth;
spriteslider.spritecount = 20;
spriteslider.pixelsperincrement = 5;
spriteslider.multiplier = spriteslider.lastmultiplier = 0;

Draggable.create(spriteslider, {
    type: 'x',
  trigger: spriteslider.slider,
  bounds: { minX:0, maxX:0, minY:0, maxY:0 },
      edgeResistance: 0,
  cursor: 'e-resize',
  onDrag: function() {
    if (this.isDragging) {
      var t = this.target;
      t.multiplier = Math.floor(this.x / t.pixelsperincrement) + t.lastmultiplier;
      // TweenLite.set(t.sprite, { backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"});
      TweenLite.set(t.sprite, { backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"});

    }
  },
      onDragEnd: function() {
    var t = this.target;
    t.lastmultiplier = t.multiplier % t.spritecount;
  }
});

window.addEventListener('resize', function(event) {
    var clientWidth = document.getElementById('spritetarget').clientWidth;
    spriteslider.spritesize = clientWidth;
    TweenLite.set(t.sprite, { backgroundPosition: (-t.multiplier * t.spritesize) + "px 0"});
}, true);

body {
  text-align: center;
  font: normal 12px sans-serif;
  background: #000000;
  color: #91E600;
}
.spriteslider {
  margin: 20px auto;
  padding: 60px;
  width: 20vw;
  height: 20vw;
  background: #FCFEFC;
  border-radius: 5px;
}
#spritetarget {
  width: 20vw;
  height: 20vw;
  background-size: cover;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/29123/heart.png); /* horizontal spritesheet - image from http://preloaders.net */
  background-repeat: repeat-x;
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - GSAP Draggable 360° sprite slider</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class='spriteslider' id='spriteslider'>
  <div id='spritetarget'></div>
</div>

<p>Drag the box left/right to control the sprite's position.</p>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script><script  src="./script.js"></script>

</body>
</html>