Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 I can do it with my actual CSS?

like image 501
Alan Alvarez Avatar asked May 02 '18 19:05

Alan Alvarez


People also ask

Can we do animation using CSS without using JavaScript or jQuery?

CSS allows animation of HTML elements without using JavaScript or Flash!

Can SVGs be animated?

SVG supports the ability to change vector graphics over time, to create animated effects. SVG content can be animated in the following ways: Using SVG's animation elements [svg-animation]. SVG document fragments can describe time-based modifications to the document's elements.

Can we add animation using JavaScript?

JavaScript animations are done by programming gradual changes in an element's style. The changes are called by a timer. When the timer interval is small, the animation looks continuous.

Is Lottie an SVG animation?

Lottie is an SVG animation framework developed and maintained by Airbnb. Which helps you to take the vector animations that you created in After Effects and export them and use them as web animations directly on the web. The good part is that the vector animation file is just a JSON and is just a few KBs in size.


2 Answers

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" />
like image 195
ccprog Avatar answered Sep 29 '22 11:09

ccprog


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.

like image 40
Afron Orana Avatar answered Sep 29 '22 11:09

Afron Orana