I'm struggling to initiate the animation when it enters the viewport. I've looked through previous questions on stack overflow, but I can't seem to customize the JS for my specific requirements. My latest attempt was to start the pink line's animation as soon as it becomes visible in the viewport... I believe once that is solved, I can apply it to other elements as well. If you need more information, please let me know. Any suggestions? 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);