Share Posted March 23, 2017 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 Link to comment Share on other sites More sharing options...
Share Posted March 23, 2017 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 23, 2017 Hi Dipscom, Thanks for the response.. i have just tried this an it has resolved the loading issues i was getting Thanks again Link to comment Share on other sites More sharing options...
Share Posted March 23, 2017 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now