CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Clarke
Clarke

Reputation: 47

Why wont my Animation work?

I cannot work out why my both of my lines have stopped animating... (If it helps my CodePen is here)

The two lines originally started there animation from the top and then finished at the bottom. I think I may have some error within my JS, but cannot for the life of me work it out.

My HTML:

<body>
  <div class="canvas_container">
    <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">

      <g>

        <path id="movingLine1" d="m 20,-10 l -20,600 z" class="white-line">

          <animate id="lineAnim1" attributeName="stroke-dashoffset" from="-70" to="0" dur="5.5s" begin="1s" fill="freeze" />

      </g>

      <g>

        <path id="movingLine2" d="m 80,-10 l -20,600 z" class="white-line">

          <animate id="lineAnim2" attributeName="stroke-dashoffset" from="-70" to="0" dur="5.5s" begin="1s" fill="freeze" />

      </g>
    </svg>
  </div>


</body>

My CSS:

 body {
   background: black;
 }
.canvas_container{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

 .white-line {
   fill: none;
   stroke: white;
   stroke-width: 5%;
 }

My JS:

window.onload = function() {
  Animate(1);
}

function Animate(number) {
  var line = document.getElementById('movingLine1' + number);
  var lineLength = line.getTotalLength().toString();
  var lineAnim = document.getElementById('lineAnim' + number);
  line.setAttributeNS(null, 'stroke-dasharray', lineLength + " " + lineLength);
  line.setAttributeNS(null, 'stroke-dashoffset', lineLength);
  lineAnim.setAttributeNS(null, 'from', lineLength);
  lineAnim.setAttributeNS(null, 'values', lineLength + ';0');
}

function fade(number) {
  var line = document.getElementById('movingLine' + number);

  var animation = document.createElementNS(
    'http://www.w3.org/2000/svg', 'animate');
  animation.setAttributeNS(null, 'attributeName', 'opacity');
  animation.setAttributeNS(null, 'to', 0);
  animation.setAttributeNS(null, 'dur', 1.25);
  animation.setAttributeNS(null, 'begin', 10);
  animation.setAttributeNS(null, 'fill', 'freeze');
  line.appendChild(animation);
}

If anyone can help I would very much appreciate it

Upvotes: 0

Views: 65

Answers (1)

Gurduloo
Gurduloo

Reputation: 151

You forgot to animate line 2 in your load event:

window.onload = function() {
  Animate(1);
  Animate(2);
}

Upvotes: 1

Related Questions