Drawing a curved (responsive) SVG path on a scroll

Question

After reading all the noise around the SVG animation with the strokeDashArray trick, I finally found some code to connect this function to the user's scroll position on Cables> .

This idea is wonderful, but I have a wavy, winding path that actually loops at some point. So I split the calculated total path length to get a good middle pad, but it still lags behind the lag of the line or moving forward as you scroll.

Here is an example fragment with some settings:

$(document).ready(function(){

  $(window).scroll(function() {
    drawLine( $('#route'), document.getElementById('path') );
  });

  //draw the line
  function drawLine(container, line){

    var pathLength = line.getTotalLength(),
        distanceFromTop = container.offset().top - $(window).scrollTop(),
        percentDone = 1 - (distanceFromTop / $(window).height()),
        length = percentDone * pathLength / 30;

    line.style.strokeDasharray = [ length ,pathLength].join(' ');
  }

});

CodePen . , , ?

:. SVG, , . , ? CodePen.

Answer 1

, , . :

http://codepen.io/anon/pen/idvoh

scrolltop, .

, , , . . , , 10 , , () n/10ths . .