stevenb85

Hi Dipscom, Thanks for the response.. i have just tried this an it has resolved the loading issues i was getting Thanks again

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