Jump to content
Search Community

image sequence on scroll - working locally but not on server

stevenb85 test
Moderator Tag

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Solution

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.

  • Like 1
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.
×
×
  • Create New...