/** * Animate a dashed svg path * @param el DOM path element * @param width Width of the dashes * @param space Space between the dashes */ animateLine (el, width, space) { let total = Math.floor(el.getTotalLength()) let segment = [width, space] console.log('total,', total) var line = { step: 0, dashes: [0] } TweenMax.to(line, 2, { step: total, onUpdate: () => { let dashNumber = line.dashes.reduce((a, b) => a + b, 0) let missing = Math.floor(line.step) - dashNumber let stuffing = 1 + total - (dashNumber + missing) let index = line.dashes.length - 1 while (missing > 0) { if (line.dashes[ index ] === segment[index % 2]) { line.dashes.push(0) index++ } line.dashes[ index ]++ missing-- } let finalArray = [].concat(line.dashes) if (index % 2 === 0) { finalArray.push(stuffing) } else { finalArray = finalArray.concat([width, Math.max(0, stuffing - width)]) } el.setAttribute('stroke-dasharray', finalArray.join(',')) } }) }