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