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

I am trying to imitate 3d-model rotation with a sprite sheet. I found a perfect example on Codepen, but it was not responsive.

What I tried to do is to write divs, containers and spritesize (in script) in vw, and then it is being checked in the window.resize event. It does work, but unfortunately not DURING window resize.

I put my snippet and three pictures in the post —

1. I opened website and everything is perfect – image
2. I started to change the size of my browser window and as you can see something is wrong – image
3. Now I tried to “rotate” the “model” with resized window and all is fine again – image

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;
}

<div class='spriteslider' id='spriteslider'>
  <div id='spritetarget'></div>
</div>

<p>Drag the box left/right to control the sprite's position.</p>
<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>

Answer

The issue is because you’re referencing t in the window.resize event handler, yet that variable has been defined in a different scope, and is not accessible from that location.

To fix this issue you can replace t in that function with the spriteslider variable, as that’s what t is expected to contain. Try this:

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"
      });

    }
  },
  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(spriteslider.sprite, {
    backgroundPosition: (-spriteslider.multiplier * spriteslider.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;
}

<div class='spriteslider' id='spriteslider'>
  <div id='spritetarget'></div>
</div>

<p>Drag the box left/right to control the sprite's position.</p>
<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>