motion & breath

an experiment in simple transitions

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>

<body>
  <svg width=960 height=500 style="background-color:#d1fdff">
  </svg>
  <script>
    var data = [ 1, 2, 3, 4, 5 ];
    var svg = d3.select("svg");
    var circles = svg.selectAll("circle").data(data)
    circles.enter()
      .append("circle")
      .attr({
        r: 10,
        cx: function(d,i) { return 100 + i * 168 },
        cy: 200,
        fill: "#ff6d05"
      })
    
    function transition() {
      circles.transition()
        .ease("sin")
        .duration(800)
        .delay(function(d,i) { return i * 100 })
        .attr({ r: 20 })
        .each("end", function() {
          circles.transition()
            .ease("sin")
            .duration(600)
            .delay(function(d,i) { return i * 100 })
            .attr({r: 10 })
            .each("end", function() {
              transition();
            })
        })
    }
    transition()
  
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js