Hi!
I recently got some amazing help getting a SVG line to animate. What I was wondering now (since I have minimal experience with JS etc.) is how I could get this the line to animate when its in the viewport. Since the Line on my second section animates while not in the viewport.
This is the code I use:
> <div class="wrapper">
> <svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
> viewBox="0 0 1200 1200" width=100% height=100% id="path">
> <path fill="none" stroke="red" stroke-width="2" id="path" d="M274,0v263.5c0,82.84,67.16,150,150,150h150.5H776c82.84,0,150,67.16,150,150V900"/>
> </svg>
> </div>
> <script src="https://cdn.jsdelivr.net/jquery.drawsvg/1/jquery.drawsvg.min.js"></script>
> <script>
> var $doc = $(document),
> $win = $(window),
> $svg = $('svg').drawsvg(),
> max = $doc.height() - $win.height();
>
> $win.on('scroll', function() {
> var p = $win.scrollTop() / max;
> $svg.drawsvg('progress', p);
> });
>
> </script>
and this is my preview link: https://preview.webflow.com/preview/enecobrand?utm_medium=preview_link&utm_source=designer&utm_content=enecobrand&preview=418f0729225a802aec9279ad0dd65fe5&mode=preview
for the line to animate look here: https://enecobrand.webflow.io/