How to activate SVG drawing animation when arriving at the div of it?

Navigation
1

I put a file in SVG to have an animation as if it were creating it in lines (unfortunately in the example below it is not working, but in my file it is.)

With this code below, as soon as I enter the page, the animation begins and happens until the drawing completes.

How do I make the drawing animation start as soon as I get close to it? Because the drawing is close to the footer on my site, and as the animation starts as soon as I enter the page, I'm losing it.

The animation is similar to that of this here site, but instead of being a mouse scroll, it is with the height of the scroll / page. 

document.addEventListener('DOMContentLoaded', function() {


        var svg4 = new Walkway({
          selector: '#Layer_1',
          duration: 3500,
          redrawOnFocus: true

        });

        svg4.draw();

        document.addEventListener('dblclick', function() {
          svg.redraw();
          svg4.redraw();
        }, false);
      });
svg {
	width: 157px;
	height: 157px;
	fill: red;
	margin-left: 130px;
}

svg path {
	stroke: #310B3B;
}

svg:not(:root) {
	overflow: visible;
}

path {
	fill: transparent;
}

svg > span {
	position: absolute;
	top: 0;
	right: 0;
}

path, line, polyline {
	stroke: #fff;
	stroke-width: 1px;
}



polyline {
        stroke-width: 4px;
}

#Layer_1 path {
        stroke-width: 6.5px;
      }
<script src="https://github.com/ConnorAtherton/walkway/blob/master/src/walkway.js"></script><svgversion="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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
			<path d="M435.2,392.533c-23.526,0-42.667,19.14-42.667,42.667s19.14,42.667,42.667,42.667c23.526,0,42.667-19.14,42.667-42.667
				S458.726,392.533,435.2,392.533z M435.2,460.8c-14.114,0-25.6-11.486-25.6-25.6s11.486-25.6,25.6-25.6s25.6,11.486,25.6,25.6
				S449.314,460.8,435.2,460.8z"/>
			<path d="M494.933,387.029V102.4c0-9.412-7.654-17.067-17.067-17.067h-85.333c-9.412,0-17.067,7.654-17.067,17.067v230.4
				c0,4.71,3.814,8.533,8.533,8.533h17.067c4.719,0,8.533-3.823,8.533-8.533c0-4.71-3.814-8.533-8.533-8.533h-8.533V307.2h8.533
				c4.719,0,8.533-3.823,8.533-8.533s-3.814-8.533-8.533-8.533h-8.533v-17.067h25.6c4.719,0,8.533-3.823,8.533-8.533
				S422.852,256,418.133,256h-25.6v-17.067h8.533c4.719,0,8.533-3.823,8.533-8.533c0-4.71-3.814-8.533-8.533-8.533h-8.533V204.8
				h8.533c4.719,0,8.533-3.823,8.533-8.533s-3.814-8.533-8.533-8.533h-8.533v-17.067h8.533c4.719,0,8.533-3.823,8.533-8.533
				c0-4.71-3.814-8.533-8.533-8.533h-8.533v-17.067h25.6c4.719,0,8.533-3.823,8.533-8.533c0-4.71-3.814-8.533-8.533-8.533h-25.6
				V102.4h85.333v268.988c-12.22-8.201-26.88-12.988-42.667-12.988c-42.351,0-76.8,34.458-76.8,76.8
				c0,15.778,4.796,30.455,12.979,42.667H136.533v-85.333H153.6v25.6c0,4.71,3.823,8.533,8.533,8.533
				c4.71,0,8.533-3.823,8.533-8.533v-25.6h17.067v8.533c0,4.71,3.823,8.533,8.533,8.533s8.533-3.823,8.533-8.533v-8.533h17.067
				v8.533c0,4.71,3.823,8.533,8.533,8.533s8.533-3.823,8.533-8.533v-8.533H256v8.533c0,4.71,3.823,8.533,8.533,8.533
				c4.719,0,8.533-3.823,8.533-8.533v-8.533h17.067v25.6c0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533v-25.6h17.067
				v8.533c0,4.71,3.814,8.533,8.533,8.533c4.719,0,8.533-3.823,8.533-8.533V384c0-4.71-3.814-8.533-8.533-8.533H136.533
				c-9.89,0-17.067,7.177-17.067,17.067v85.333c0,9.89,7.177,17.067,17.067,17.067h250.496C400.213,505.583,416.964,512,435.2,512
				c42.351,0,76.8-34.458,76.8-76.8C512,416.964,505.583,400.222,494.933,387.029z M435.2,494.933
				c-32.93,0-59.733-26.795-59.733-59.733s26.803-59.733,59.733-59.733c32.93,0,59.733,26.795,59.733,59.733
				S468.13,494.933,435.2,494.933z"/>
			<path d="M443.733,59.733c0-4.71-3.814-8.533-8.533-8.533H102.4C102.4,22.963,79.437,0,51.2,0S0,22.963,0,51.2v409.6
				C0,489.037,22.963,512,51.2,512h42.667c4.71,0,8.533-3.823,8.533-8.533c0-4.71-3.823-8.533-8.533-8.533H51.2
				c-18.825,0-34.133-15.309-34.133-34.133c0-18.824,15.309-34.133,34.133-34.133s34.133,15.309,34.133,34.133
				c0,4.71,3.823,8.533,8.533,8.533c4.71,0,8.533-3.823,8.533-8.533V68.267h332.8C439.919,68.267,443.733,64.444,443.733,59.733z
				 M85.333,422.741C76.262,414.601,64.324,409.6,51.2,409.6s-25.062,5.001-34.133,13.141V51.2
				c0-18.825,15.309-34.133,34.133-34.133S85.333,32.375,85.333,51.2V422.741z"/>
			<path d="M326.767,116.966c1.664,1.664,3.849,2.5,6.033,2.5c2.185,0,4.369-0.836,6.033-2.5c3.337-3.337,3.337-8.73,0-12.066
				l-17.058-17.058c-0.794-0.794-1.732-1.417-2.782-1.852c-2.082-0.862-4.437-0.862-6.519,0c-1.05,0.435-1.988,1.058-2.782,1.852
				L292.634,104.9c-3.337,3.337-3.337,8.73,0,12.066c3.337,3.336,8.73,3.336,12.066,0l2.5-2.5v197.734l-2.5-2.5
				c-3.337-3.336-8.73-3.336-12.066,0c-3.337,3.337-3.337,8.73,0,12.066l17.058,17.058c0.794,0.794,1.732,1.417,2.782,1.852
				c1.041,0.435,2.15,0.657,3.26,0.657c1.109,0,2.219-0.222,3.26-0.657c1.05-0.435,1.988-1.058,2.782-1.852l17.058-17.058
				c3.337-3.337,3.337-8.73,0-12.066c-3.336-3.336-8.73-3.336-12.066,0l-2.5,2.5V114.466L326.767,116.966z"/>
</g>
</svg>
    
asked by anonymous 24.11.2017 / 21:34

1 answer

1

Enter a listener that will check when the element is visible on the screen, starting the animation: 

document.addEventListener('DOMContentLoaded', function() {

   var svg4 = new Walkway({
    selector: '#Layer_1',
    duration: 3500,
    redrawOnFocus: true
   });

   $(window).on("scroll", function(){
      var el = $('#Layer_1');
      var eleHeight = el.outerHeight(); // altura do elemento
      var eleTopo = el.offset().top; // distancia do elemento ao topo do documento
      var scrlTopo = $(window).scrollTop(); // quanto foi rolada a janela
      var distance = eleTopo-scrlTopo; // distancia do elemento ao topo da janela
      var altJanela = window.innerHeight; // altura da janela
      if(distance <= altJanela-(eleHeight/2)) {
         svg4.draw(); // inicia a animação
      }
   });

  document.addEventListener('dblclick', function() {
    svg.redraw();
    svg4.redraw();
  }, false);
});

JSFiddle test

    
24.11.2017 / 22:07
Printing times with predetermined intervals Double-chained list with remove method that does not work