joediton
12/13/2016 - 1:40 PM

SVG path animations with javascript

var paths = document.querySelectorAll('.path');

for(i = 0; i < paths.length; i++) {

    var pathLength = paths[i].getTotalLength();
    var duration = Math.ceil(pathLength*1.5);

    paths[i].style.strokeDasharray = pathLength + ' ' + pathLength;
    paths[i].style.strokeDashoffset = pathLength;
    paths[i].style.animationName = "/* animationName */";
    paths[i].style.animationTimingFunction = "linear";
    paths[i].style.animationFillMode = "both";
    paths[i].style.animationDuration = duration + 'ms';

}