How to scroll draw each SVG path one at a time (chronologically)?

Question

This is related to a previous post here. However, I think it was a bit of a momentous task. So I am breaking it down to smaller chunks.

I have made a simple SVG imag

Answer 1

How is this? You can control when each path starts and finishes drawing by setting the startPct and endPct percentage values in the scrollBehaviour array.

Note: this code assumes you are only using paths and rects. If you start using other elements, the calcPathLength() function will have to be updated.

var scrollBehaviour = [
     {id: 'line1', startPct: 0, endPct: 30},
     {id: 'rect1', startPct: 30, endPct: 60},
     {id: 'line2', startPct: 60, endPct: 80},
     {id: 'circ1', startPct: 80, endPct: 100}
  ];

$(document).ready(function() {

  // On a scroll event - execute function
  $(window).scroll(scrollEventHandler);

  // Call the scroll event handler once at the start to initialise the dash offsets
  scrollEventHandler();

});



function scrollEventHandler()
{
  // Calculate how far down the page the user is 
  var percentOfScroll = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);

  // For each lement that is getting drawn...
  for (var i=0; i

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;

}