Animate a svg path with TweenMax

TweenMax dashed svg path animation.js

/**
 * 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(','))
    }
  })
}