scrollTop animations choppy

Question

Sorry, my JavaScript skills are limited, but I’m trying to learn.

I am trying to make a smooth scrolling animation with scrollTop calculations where divs placed absolute on top of each other start with zero width and grow behind each other.

Have set up a fiddle to try to explain:

http://jsfiddle.net/vsP4e/1/

The problem is that the animation is really choppy and simply wrong at certain points. Also, it I refresh the browser my divs start up at totally wrong places and jumps back in place when I start scrolling.

In firebug the calculations are often wrong and seem to never stop going even when I am not scrolling.

    $(document).ready(function() {  

        doStuff();

      $(document).scroll(function() {


        var levelScroll = $(document).scrollTop();


        doStuff();


          var show1 = $("#shaddow1").width();
          var c1w = $("#circle1").width();      
          var div1W = $("#div1").width();   

                    //div1
                    if(levelScroll>=0 && levelScroll<=200){
                      $("#div1").css("width", "0px");
                      $('#div1').css("margin-left", (-(div1W)/2));
                      $('#div1').css("margin-top", (-(div1W)/2));
                    }
                    else if(levelScroll>=200 && levelScroll<=500){
                      $("#div1").css("width", (levelScroll-200)+"px");
                      $('#div1').css("margin-left", (-(div1W)/2));
                      $('#div1').css("margin-top", (-(div1W)/2));

                    }
                    else if(levelScroll>=500){
                      $("#div1").css("width", "188px");
                      $("#div1").css("margin-left", "-94px");
                      $("#div1").css("margin-top", "-94px");
                    }

                    //circle1
                    if(levelScroll>=0 && levelScroll<=350){
                      $("#circle1").css("width", "0px");
                      $('#circle1').css("margin-left", (-(c1w)/2));
                      $('#circle1').css("margin-top", (-(c1w)/2));
                      $("#shaddow1").css("width", "0px");
                      $('#shaddow1').css("margin-left", (-(show1)/2));
                      $('#shaddow1').css("margin-top", (-(show1)/2));
                    }
                    else if(levelScroll>=350 && levelScroll<=650){
                      $("#circle1").css("width", (levelScroll-350)+"px");
                      $('#circle1').css("margin-left", (-(c1w)/2));
                      $('#circle1').css("margin-top", (-(c1w)/2));
                      $("#shaddow1").css("width", (levelScroll-300)+"px");
                      $('#shaddow1').css("margin-left", (-(show1)/2));
                      $('#shaddow1').css("margin-top", (-(show1)/2));

                    }
                    else if(levelScroll>=600){
                      $("#circle1").css("width", "232px");
                      $("#circle1").css("margin-left", "-116px");
                      $("#circle1").css("margin-top", "-116px");
                      $("#shaddow1").css("width", "232px");
                      $("#shaddow1").css("margin-left", "-116px");
                      $("#shaddow1").css("margin-top", "-116px");
                    }


                  });







    });

    function doStuff(){
            var show1 = $("#shaddow1").width();
            var c1w = $("#circle1").width();
            var div1W = $("#div1").width();

            $('#shaddow1').css("margin-left", (-(show1)/2));
            $('#shaddow1').css("margin-top", (-(show1)/2));

            $('#circle1').css("margin-left", (-(c1w)/2));
            $('#circle1').css("margin-top", (-(c1w)/2));

            $('#div1').css("margin-left", (-(div1W)/2));
            $('#div1').css("margin-top", (-(div1W)/2));
        }

score 1 · Accepted Answer · edited May 23 '17 at 11:49

If you use same values on different layers of a condition, it'll create conflict. Here is an example from your function:

if(levelScroll>=0 && levelScroll<=200){ ... }
else if(levelScroll>=200 && levelScroll<=500){ ... }
//this will create a conflict when levelScroll value came to 200

else if(levelScroll>350 && levelScroll<=650){ ... }
else if(levelScroll>=600){ ... }
//this equation also will create bigger problem

Here is working jsFiddle.

Note: I won't suggest to use different (in your example you've got 2) conditions on scrolling, it raises mistake possibilty and most browser's still can't handle these advanced jQuery animations.

Thank you so much for you’re help! Animation is still a bit choppy but now the divs does not just fly off – they keep in place :) — HelenT, Jan 31 '13 at 08:23

scrollTop animations choppy

1 Answers1