Jump to content
Search Community

Parallax Effect Jittering/Stuttering

Frisbetarian test
Moderator Tag

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

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?

Link to comment
Share on other sites

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)

  • Like 1
Link to comment
Share on other sites

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.

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