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 —
- I opened website and everything is perfect – image
- I started to change the size of my browser window and as you can see something is wrong – image
- 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>
Advertisement
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>