How to activate animation of the SVG drawing when arriving in his div?

Asked

Viewed 133 times

1

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

With this code below, as soon as I enter the page, the animation starts and happens until the drawing is completed.

How do I make the cartoon animation start as soon as I get close to it? Because the drawing is next 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 this site here, however, instead of scrolling with the mouse, it is with scroll/page height.

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>


<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 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>

javascript jquery html css

  • But the drawing is so small, smaller than the height of the window. There is no time to scroll the screen.

  • I’ll rephrase the question, it’ll be better to start the animation when I get to the bottom of the site... I want to try to do this.

1 answer

1


Insert a listener who 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);
});

Testing in the Jsfiddle

  • AAAA worked! Thank you very much :)

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.