title: How to scroll draw each SVG path one at a time (chronologically)?
body: <p>This is related to a previous post <a href="https://stackoverflow.com/questions/32935430/how-to-scroll-and-animate-svg-draw">here</a>. However, I think it was a bit of a momentous task. So I am breaking it down to smaller chunks.</p>
  
  <p>I have made a simple SVG image that includes one "path" and one "rect" element. The user can draw the lines on and off the window by scrolling up and down the page (scroll down the page for on and up the page for off/"undraw). However, both elements "draw"/animate at the same time. What I want to do is as the user scrolls down the page, the line path draws on, then the "rect" element draws (after), so it's more fluid and chronological.</p>
  
  <pre><code> &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;the single line&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="line.css"&gt;
  
  &lt;style&gt;
  svg {
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
  }
  /*.line{
    stroke-dashoffset:850;
    stroke-dasharray: 850;
  }
  .box {
   stroke-dashoffset:1852;
   stroke-dasharray: 1852;
  }*/
  .all{
   stroke-dashoffset:2702;
   stroke-dasharray: 2702;
  }
  
  .straightLine {
    height: 3000px;
    position: relative;
    width: 360px;    
    margin: 40vh auto 0 auto;
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;main role="article" title="line"&gt;
  &lt;div class="straightLine"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  
       viewBox="0 0 1280 800" style="enable-background:new 0 0 1280 800;" xml:space="preserve"&gt;
  
  &lt;style type="text/css"&gt;
  
      .st0{fill:none;stroke:#000000;stroke-width:8;stroke-miterlimit:10;}
  
  &lt;/style&gt;
  &lt;g class="all"&gt;
  
  &lt;path class="st0" d="M54,178h509.6c49.9,0,90.4,40.5,90.4,90.4V428"/&gt;
  
  
  &lt;rect x="498" y="428" class="st0" width="308" height="162"/&gt;
  
  &lt;/g&gt;
  &lt;/svg&gt;
  
  
  
  &lt;/div&gt;
  &lt;/main&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="line.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
    //variable for the 'stroke-dashoffset' unit
    var $dashOffset = $(".all").css("stroke-dashoffset");
    //on a scroll event - execute function
    $(window).scroll(function() {
      //calculate how far down the page the user is 
      var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
      //convert dashoffset pixel value to interger
      var $newUnit = parseInt($dashOffset, 10);
      //get the value to be subtracted from the 'stroke-dashoffset'
      var $offsetUnit = $percentageComplete * ($newUnit / 100);
      //set the new value of the dashoffset to create the drawing effect
      $(".all").css("stroke-dashoffset", $newUnit - $offsetUnit);
    });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>