image sequence on scroll - working locally but not on server

[stevenb85 0 Likes (Newbie)]

Hi,

 

I'm fairly new to GSAP and have been getting to grips with it reasonably well i think

 

I'm using scrollmagic and Tweenmax for an image sequence on scroll. The code below works fine locally but when hosted on a server the image sequence is really jumpy and missing images. In chrome i am getting net::ERR_CONNECTION_RESET error in the console window...should i be using some sort of image preloader? have i missed anything? or is there a better / easier solution for this?

 

HTML:

<div id="trigger1"></div>
  <div id="pin1">
    <div id="imagesequence">
        <img id="myimg"/><br>
  </div>
</div>

JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script>
var controller = new ScrollMagic.Controller();

// define images
var images = [
       "images/3Drotate/1.jpg",
       "images/3Drotate/2.jpg",
       "images/3Drotate/3.jpg",
       "images/3Drotate/4.jpg",
       "images/3Drotate/5.jpg",
       "images/3Drotate/6.jpg",
       "images/3Drotate/7.jpg",
       "images/3Drotate/8.jpg",
       "images/3Drotate/9.jpg",
       "images/3Drotate/10.jpg",
       "images/3Drotate/11.jpg",
       "images/3Drotate/12.jpg",
       "images/3Drotate/13.jpg",
       "images/3Drotate/14.jpg",
       "images/3Drotate/15.jpg",
       "images/3Drotate/16.jpg",
       "images/3Drotate/17.jpg",
       "images/3Drotate/18.jpg",
       "images/3Drotate/19.jpg",
       "images/3Drotate/20.jpg",
       "images/3Drotate/21.jpg",
       "images/3Drotate/22.jpg",
       "images/3Drotate/23.jpg",
       "images/3Drotate/24.jpg",
       "images/3Drotate/25.jpg",
       "images/3Drotate/26.jpg",
       "images/3Drotate/27.jpg",
       "images/3Drotate/28.jpg",
       "images/3Drotate/29.jpg",
       "images/3Drotate/30.jpg",
       "images/3Drotate/31.jpg",
       "images/3Drotate/32.jpg",
       "images/3Drotate/33.jpg",
       "images/3Drotate/34.jpg",
       "images/3Drotate/35.jpg",
       "images/3Drotate/36.jpg",
       "images/3Drotate/37.jpg",
       "images/3Drotate/38.jpg",
       "images/3Drotate/39.jpg",
       "images/3Drotate/40.jpg",
       "images/3Drotate/41.jpg",
       "images/3Drotate/42.jpg",
       "images/3Drotate/43.jpg",
       "images/3Drotate/44.jpg",
       "images/3Drotate/45.jpg",
       "images/3Drotate/46.jpg",
 ];


 var obj = {curImg: 0};

// create tween
var tween = TweenMax.to(obj, 0.5,
    {
     curImg: images.length - 1,
     roundProps: "curImg",             
     repeat: 0,                                 
     immediateRender: true,          
     ease: Linear.easeNone,          
     onUpdate: function () {
     $("#myimg").attr("src", images[obj.curImg]); 
                            }
     }
 );

// init controller
var controller = new ScrollMagic.Controller();

// build scene
var scene0 = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 800})
                    .setPin("#pin1")
                    .setTween(tween)
                    .addTo(controller);

                    var triggerHook = scene0.triggerHook();
                    scene0.triggerHook(0);
</script>

Any help or a point in the right direction would be much appreciated

[Dipscom 2,815 Likes (Superhero)]

Hi stevenb85,

 

Welcome to the forums!

 

I think you will be better off by trying to use a sprite-sheet rather than an image sequence. You will always be having loading issues if you are trying to update the "src" attribute of your <img> tag. Bellow is a thread here in the GSAP forums about sprite sheets:

 

https://greensock.com/forums/topic/15708-is-it-possible-to-animate-spritesheet-through-gsap/

 

 

Your connection error could be one of N things. A super quick search online pointed me to this stackoverflow: http://stackoverflow.com/questions/24931566/getting-error-in-console-failed-to-load-resource-neterr-connection-reset

 

Bottom line is that we can't be sure because depends on your setup.

[stevenb85 0 Likes (Newbie)]

Hi Dipscom,

 

Thanks for the response..

i have just tried this an it has resolved the loading issues i was getting

 

Thanks again

[PointC 8,599 Likes (Superhero)]

Hi stevenb85 

 

Looks like Dipscom has you all fixed up, but I thought you might like to see this pen by Blake:

 

See the Pen OXPLPJ by osublake (@osublake) on CodePen

 

He's using PIXI for the images and a GSAP draggable for rotation control.

 

Happy tweening.