How to trigger an SVG animation with JavaScript? (No jQuery)

Question

I have an SVG line path animated with this sample I found:

 svg { position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; display: block; background: transparent; } .path { stroke: black; stroke-dasharray: 290; stroke-dashoffset: 130; animation: dash 6s 0s forwards infinite; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; } @keyframes dash { from { stroke-dashoffset: 290; } to { stroke-dashoffset: 0; } }

 <svg viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg"> <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path> </svg>

It works fine but it's triggered when the page loads, is there a way (let's say with a button) to trigger this animation using Javascript?

I can handle JS but I'm a noob with CSS and SVG animations.

Can anybody give me an example of how can I make it with my actual CSS?

Thanks.

Answer 1

You could also use SMIL animation syntax instead of CSS animation. This admittedly has the downside of not running in Microsoft browsers (both IE and Edge).

 var animation = document.getElementById("dash"); function showSVG() { animation.beginElement(); }

 svg { position: relative; width: 100%; height: 150px; left: 0%; top: 0%; display: block; background: transparent; } .path { stroke: black; stroke-dasharray: 290; stroke-dashoffset: 290; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }

 <button id="button" onclick="showSVG()">Click</button> <svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg"> <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"> <animate id="dash" attributeName="stroke-dashoffset" from="290" to="0" begin="indefinite" dur="6s" fill="freeze" /> </path> </svg>

This animation runs once every time you click. If you want it to repeat in fixed intervals, like CSS animation-repeat: infinite prescribes, use

<animate id="dash" attributeName="stroke-dashoffset"
    from="290" to="0"
    begin="indefinite" dur="6s" repeatCount="indefinite" />

Answer 2

svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    display: block;
    background: transparent;
}

.path {
    stroke: black;
    stroke-dasharray: 290;
    stroke-dashoffset: 130;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dashoffset: 290;
}

.animated {
    animation: dash 6s 0s forwards infinite;
    stroke-dashoffset: 0;
}

@keyframes dash {
    from {
        stroke-dashoffset: 290;
    }
    to {
        stroke-dashoffset: 0;
    }
}

Then you can add the class .animated to your path with js whenever you need it.

Answer 3

You should include your animation in a css class:

    .dash-animate {
        animation: dash 6s 0s forwards infinite;
    }

    @keyframes dash {
      from {
        stroke-dashoffset: 290;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

And then simply apply that class when/where you want using js:

var button = getElementById('some-button');

button.addEventListner('click', function() {
  var elements = document.querySelectorAll('.path');
  Array.prototype.forEach.call(elements, function(el) {
    el.classList.add('dash-animate');
  });
});

Answer 4

 var svgPattern = document.getElementById("svg") svgPattern.style.display = "none"; function showSVG(){ svgPattern.style.display = "block"; }

 svg{ position:absolute; width:100%; height:100%; left:0%; top:0%; display:block; background:transparent; } .path { stroke:black; stroke-dasharray: 290; stroke-dashoffset: 130; animation: dash 6s 0s forwards infinite; stroke-width:2px; stroke-linecap:round; stroke-linejoin:round; } @keyframes dash { from { stroke-dashoffset: 290; } to { stroke-dashoffset: 0; } }

 <button id ="button" onclick="showSVG()">Click</button> <svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg"> <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path> </svg>