Jump to content


image sequence on scroll - working locally but not on server

Recommended Posts



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?



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


<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>
var controller = new ScrollMagic.Controller();

// define images
var images = [

 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})

                    var triggerHook = scene0.triggerHook();

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

Link to comment
Share on other sites

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:





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.

  • Like 1
Link to comment
Share on other sites

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

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.


  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.