Animate SVG path on scroll

Make sure to pop out to a new window, and then scroll.

An experiment to see if I can get svg paths to animate only to a certain horizontal line while a user scrolls. Used in my unreleased wongfu side project.

Built with blockbuilder.org

forked from sxywu's block: Animate SVG path on scroll

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"></script>
    <style>
    * {
      font-family: Helvetica, Verdana, sans-serif;
    }

.marker {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 400px;
      border: 1px solid #ccc;
    }
    </style>
  </head>

var svg = d3.select('svg');
    var distancePath = svg.append('path')
      .attr('fill', 'none')
      .attr('stroke', 'none').node();

var source;
    var target;
    var gap = 100;
    var totalDistance = 0;
    _.each(data.points, function(target) {
      if (!source) {
        target.d = 'M' + target.x + ',' + target.y;
      } else {
        if (source.y > target.y - gap) {
          // if they're sufficiently close to each other
          if (source.x === target.x) {
            target.d = drawLine(target.x, target.y);
            setDistance(source, target);
          } else {
            target.d = drawCurve(source.x, source.y, target.x, target.y);

setDistance(source, target);
            target.y1 = target.y - source.y;
            target.interpolate1 = d3.interpolate(0, target.distance);
          }
        } else {
          target.d = '';
          if (source.x !== data.categoryX) {
            // if the source repo owner isn't the same as the contributor, move the line back
            target.d += drawCurve(source.x, source.y, data.categoryX, source.y + gap / 3);

setDistance(source, target);
            target.y1 = gap / 3;
            target.interpolate1 = d3.interpolate(0, target.distance);
          }

x = target.x;
          y = target.y;
          if (target.x !== data.categoryX) {
            x = data.categoryX;
            y = target.y - gap / 3;
          }
          
          target.d += drawLine(x, y);
          target.y2 = y - (target.y1 || 0);
          setDistance(source, target);

if (target.x !== data.categoryX) {
            target.d += drawCurve(x, y, target.x, target.y);
            var currentDistance = target.distance;
            setDistance(source, target);
            target.y3 = gap / 3;
            target.interpolate2 = d3.interpolate(0, target.distance - currentDistance);
          }
        }
        target.totalDistance = (totalDistance += target.distance);
        
      }
      source = target;
    });

var path = svg.append('path')
      .attr('d', _.pluck(data.points, 'd').join(' '))
      .attr('fill-opacity', 0)
      .attr('stroke', '#3FB8AF')
      .attr('stroke-width', 4)
      .attr('stroke-linecap', 'round')
      .attr('stroke-dasharray', totalDistance)
      .attr('stroke-dashoffset', totalDistance);
    var circle = svg.selectAll('circle')
      .data(data.points).enter().append('circle')
      .attr('fill', '#fff')
      .attr('stroke', '#3FB8AF')
      .attr('stroke-width', 2)
      .attr('cx', function(d) {return d.x})
      .attr('cy', function(d) {return d.y})
      .attr('r', 4);

window.addEventListener('scroll', _.throttle(windowScroll, 200));

function drawLine(x, y) {
      return 'L' + x + ',' + y;
    }

function drawCurve(x1, y1, x2, y2) {
      var cy = (y1 + y2) / 2;
      return 'C' + x1 + ',' + cy + ' ' + x2 + ',' + cy + ' ' + x2 + ',' + y2;
    }

function setDistance(source, target) {
      var distancePathD = 'M' + source.x + ',' + source.y + ' ' + target.d;
      distancePath.setAttribute('d', distancePathD);
      target.distance = parseFloat(distancePath.getTotalLength().toFixed(2));
    }

</script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js