Scrool Mouse Tracking lines, with css and jquery

Question

I need to make sure that according to the mouse scrool is rotating downward, will accompany a line to the side, this I managed to do, as shown in the link below

Click here to see the example

My difficulty is when you open the page and it already appears two lines, how can I do, to open the site and appear only first line?

$(document).ready(function(){
  var count;
  $('#servicos ul li.bloco').each(function( index ) {
    count = index;
  });

  $(window).scroll(function (event) {

    var scroll = $(window).scrollTop();
    var item = $('#servicos ul').offset().top;
    if( (scroll+400) > item ){
      animSvg( $('.svg') );    
    }

    $('#servicos ul li.bloco').each(function( index ) {
      if( index < (count+1) ){
        var item = $(this).offset().top;
        var anim = $(this).find('.svg-lista');
        if( (scroll+200) > item ){
          var ativo = $('.label_serv a').children('li').eq(index);
          $('.label_serv a li').removeClass('active');
          ativo.addClass('active');


          animSvg( anim );    
        }
      }

    });

  });

});

function animSvg(obj){
  var val = obj.data('to');
  var dist = obj.scrollTop();

  obj.animate({
    'stroke-dasharray': val
  }, 1000, function() {
    /*fim*/
  });
}


function scrollCustom(id){
    var offset = $('#header_titulo').height();
    $('html, body').animate({scrollTop:$('#' + id).position().top + offset}, 'slow');
}

Answer 1

You can do it like this:

After the $(document).ready(function(){..., include a flag var mPrimeiro = false;:

$(document).ready(function(){
   var mPrimeiro = false;
...

Where has:

if( (scroll+200) > item ){

Change to:

if( scroll+mValor > item ){

And finally, include this code before the line above:

!mPrimeiro ? (mValor = item-1, mPrimeiro = true) : mValor = 200;