Parallax Effect Jittering/Stuttering

[Frisbetarian 0 Likes (Newbie)]

Hey all, I'm using Superscrollorama to tween different images on this website and apply a parallax effect on scroll
 

 

Problem is that the images that are supposed to tween stutter and jitter at random, ruining the effect.

This is the code that im using to tween the images:

      var controller = $.superscrollorama();
        var scrollDuration = 2000;

        controller.addTween('#fruitExplosion1', TweenMax.to( $('#fruitExplosion1'), 2, {css:{top:'750px',left:'920px'}, ease:Cubic.easeOutCirc}), scrollDuration);
        controller.addTween('#fruitExplosion2', TweenMax.to( $('#fruitExplosion2'), 1, {css:{top:'650px',left:'1300px'}, ease:Cubic.easeOutCirc}), scrollDuration);
        controller.addTween('#fruitExplosion3', TweenMax.to( $('#fruitExplosion3'), 2, {css:{top:'550px',left:'900px'}, ease:Cubic.easeOutCirc}), 3000);

        controller.addTween('#fruitTop1', TweenMax.to( $('#fruitTop1'), 7, {css:{top:'2260px'}, ease:Quad.easeInOut}), 7000);
        controller.addTween('#fruitMiddle1', TweenMax.from( $('#fruitMiddle1'), 1, {css:{top:'2000px'}, ease:Quad.easeInOut}), 3000);

Markup of the images:
 

<div id="fruitExplosion1"><img src="images/fruitExplosion1.png"></div>
<div id="fruitExplosion2"><img src="images/fruitExplosion2.png"></div>
<div id="fruitExplosion3"><img src="images/fruitExplosion3.png"></div>
<div style="position:absolute;z-index:-1;">
    <img id="bottle" src="images/bottle/bottle.png" style="height:5850px;">
    <img id="fruitTop1" src="images/bottle/front.gif">
    <img id="fruitMiddle1" src="images/bottle/middle.gif">
    <img id="fruitBottom1" src="images/bottle/back.png">
    <!-- <img id="gradient" src="images/bottle/gradient.png"> -->
</div>

CSS:

#fruitExplosion1{
    position: absolute;
    top:900px;
    left:920px;
    z-index:-1;
}
#fruitExplosion2{
    position: absolute;
    top:750px;
    left:1200px;
    z-index:-1;
}
#fruitExplosion3{
    position: absolute;
    top:750px;
    left:1000px;
    z-index:-1;
}

#bottle{
    position: absolute;
    top:1460px;
    left:1680px;
    width:849px;
    /*height:5850px;*/
    z-index:-1;
}

#fruitTop1{
    position: absolute;/*780*/
    top:1423px;
    left:1680px;
    z-index:3;
}#fruitMiddle1{
    position: absolute;
    top:1245px;
    left:1671px;
    z-index:2;
}#fruitBottom1{
    position: absolute;
    top:1228px;
    left:1672px;
    z-index:1;
}

Any advice on how to solve this?

[Michael71 59 Likes (Contributor)]

Well from my experience with similar effects I believe this is a case where the browser fails because of render, animating large images causes the browser to struggle and thus frame-rate drops. I believe this causes whatever jitter/stutter you are experiencing.

However for me the site looked fine in terms of animation (Chrome latest)

[Jonathan 5,324 Likes (Superhero)]

hello.. i get this error in the console when i go to your site:

SyntaxError: missing } after function body
http://polypodhub.com/qi/js/jquery-ui-1.10.3.custom.min.js
Line 7

also this:

"NetworkError: 404 Not Found - http://polypodhub.com/qi/images/bottomBackground.png.png"

[djanes376 6 Likes (Newbie)]

Although I didn't look into the code, I did look into your image sizes. Right now you are trying to simultaneously animate around 5mb of very large images (both GIF and PNG) with complex alpha at the same time. Not only this, but they are also being animated on scroll position. I'm no expert on browser performance but I can only imagine that is is incredibly taxing from within the browser. It even chugs on my beast of a laptop. You may want to reevaluate your design because most people will have trouble rendering this page as is let alone have it be smooth. I would recommend trying to reuse a number of smaller assets rather than using these giant ones. It would also be wise to save these images as png-24 and use something like tiny png to get optimum compression. You should get much better performance this way.