Skip to content

Instantly share code, notes, and snippets.

@cgarnier

cgarnier/TweenMax dashed svg path animation.js

Last active October 5, 2016 09:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cgarnier/4799d76603b14c0d19184d4c8c081c10 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cgarnier/4799d76603b14c0d19184d4c8c081c10 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cgarnier revised this gist Oct 5, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion TweenMax dashed svg path animation.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /**
    * Animate a dashed line
    * Animate a dashed svg path
    * @param el DOM path element
    * @param width Width of the dashes
    * @param space Space between the dashes
  2. cgarnier renamed this gist Oct 5, 2016. 1 changed file with 0 additions and 0 deletions.
    0 TweenMax dashed svg path animation → TweenMax dashed svg path animation.js
    View file
    File renamed without changes.
  3. cgarnier created this gist Oct 5, 2016.
    42 changes: 42 additions & 0 deletions TweenMax dashed svg path animation
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    /**
    * Animate a dashed line
    * @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(','))
    }
    })
    }