Begin SVG animation when it appears in viewport

Question

I'm having a heck of a time trying to begin the animation when it appears in the viewport. I've searched through previously asked questions here on stack overflow, but I can't seem to figure how to adapt the JS to fit my needs. My latest attempt was to try and just make the pink line begin its animation when it appeared in the viewport... as I imagine once that works, I can apply to the rest of the items. Please let me know if you need anything else. Any ideas? codepen

SVG

<svg version="1.1" id="animate" class="animatedSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="792px" height="815px" viewBox="0 0 792 815" xml:space="preserve">

  <path id="purple" class="purple-stroke purpleAnimation" d="M597.645,416.25c0,121.334-98.361,219.695-219.695,219.695"/>

  <path id="green" class="green-stroke" d="M173.096,197.039c-58.343,54.482-94.817,132.087-94.817,218.211 c0,164.857,133.644,298.5,298.5,298.5"/>

  <path id="red" class="red-stroke" d="M636.449,415.25c0,143.318-116.182,259.5-259.5,259.5c-143.318,0-259.5-116.182-259.5-259.5"/>

  <path id="yellow" class="yellow-stroke" d="M585.398,201.588c55.557,54.209,90.051,129.907,90.051,213.662 c0,164.857-133.644,298.5-298.5,298.5"/>

  <path id="pink" class="pink-stroke pinkAnimation" d="M376.949,77.25c26.421,0,52.134,3.031,76.81,8.766c149.667,34.779,261.19,168.983,261.19,329.234"/>

</svg>

CSS

.pink-stroke {
  fill:none;
  stroke:#E199C3;
  stroke-width:40;
  stroke-linecap:round;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
   -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards; 
}

.pinkAnimation {
  fill:none;
  stroke:#E199C3;
  stroke-width:40;
  stroke-linecap:round;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
      animation: dash 2s linear forwards;
}

.purple-stroke{
  fill:none;
  stroke:#9E70B0;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.85s;
  animation-delay:.85s;
}

.green-stroke{
  fill:none;
  stroke:#21B585;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:1.25s;
  animation-delay:1.25s;
}

.red-stroke{
  fill:none;stroke:#E9706C;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.85s;
  animation-delay:.85s;
}

.yellow-stroke {
  fill:none;
  stroke:#EFEF99;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.45s;
  animation-delay:.45s;
}


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

JS

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll("#animate"), function(item ) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     elem.classList.add(".pinkAnimation");
      elem.classList.remove(".pink-stroke")

    } else {
      elem.classList.remove("pinkAnimation");
      elem.classList.add ('.pink-stroke')
    }
  });
}, false);

Answer 1

I was able to figure this one out... I'm sure there are better options, but it works. I used the following script and updated the corresponding CSS styles to match. Here is the updated codepen .

JS

$(window).scroll(function() {
  var wScroll = $(this).scrollTop();

  if (wScroll > $('#animate').offset().top - ($(window).height() / 1.2)) {
    $("#pink").attr("class", "pink-stroke dash-pink");
    $("#yellow").attr("class", "yellow-stroke dash-yellow");
    $("#red").attr("class", "red-stroke dash-red");
    $("#purple").attr("class", "purple-stroke dash-purple");
    $("#green").attr("class", "green-stroke dash-green");

  } else {
    $("#pink").attr("class", "pink-stroke");
    $("#yellow").attr("class", "yellow-stroke");
    $("#red").attr("class", "red-stroke");
    $("#purple").attr("class", "purple-stroke");
    $("#green").attr("class", "green-stroke");
  }
});