0

I want to only show the animation CSS when the SVG is in view and when i scroll back to that element, it will start again. I found a demo and tried to put in for my SVG element but is not working. Please do help me! Thanks!

Activate CSS3 animation when the content scrolls into view

My HTML

<div class="lineNone">
        <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 614 53" style="enable-background:new 0 0 614 53; width: 70%; margin-top: 40px;" xml:space="preserve">

    <polyline class="st0 eighty" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 "/><line class="st1" x1="307" y1="53" x2="307" y2="0"/></svg>
</div>
lel
  • 327
  • 7
  • 26

1 Answers1

0

This is what you can do,

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        $(window).scroll(function () {
        var s = $(window).scrollTop(),
                d = $(document).height(),
                c = $(window).height();
                scrollPercent = (s / (d-c)) * 100;
                var position = scrollPercent;

        $("#progressbar").attr('value', position);

        });
    </script>
    <style>
        progress {
            position:fixed;
            top:15px;
        }
    </style>
</head>
<body>
    <progress id="progressbar" value="0" max="100"></progress>

    <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/accessible.svg">
    <div id="horizontal">test</div>
</body>

Mayuri Patil
  • 21
  • 2