Chained Emoji Transitions by pstuffa

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

circle {
  fill: #000;
  stroke: #000;
  stroke-width: 1.5px;
}

.smiley {
  display: none;
}

</style>
<svg width="960" height="500">
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 10, right: 70, bottom: 70, left: 10},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var y = d3.scalePoint()
    .domain(d3.range(50))
    .range([0, height]);

var z = d3.scaleLinear()
    .domain([10, 0])
    .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
    .interpolate(d3.interpolateHcl);

var smiley = d3.select(".smiley")

var smileyContainer = g.selectAll(".smiley-face")
  .data(y.domain())
  .enter().append("g")
    .attr("class","smiley-face")
    .attr("transform", function(d,i) { return "translate(0," +  y(i) + ")" });

smileyContainer.transition()
    .duration(2500)
    .delay(function(d) { return d * 100; })
    .on("start", function repeat() {

        var currentY = d3.select(this).attr("transform").split(",")[1].replace(")", "");

        d3.active(this)
            .attr("transform", "translate(" + width + "," +  y + ")")
            .attr("transform", function(d,i) { return "translate(" + width + "," +  currentY + ")" })
          .transition()
            .attr("transform", function(d,i) { return "translate(0," +  currentY + ")" })
          .transition()
            .on("start", repeat);
      });

// Thank you //emojione.com/
smileyContainer.append("circle")
  .attr("cx", 32)
  .attr("cy", 32)
  .attr("r", 30)
  .style("fill", "#ffdd67");

smileyContainer.append("path")
  .attr("d","m49.7 34.4c-.4-.5-1.1-.4-1.9-.4-15.8 0-15.8 0-31.6 0-.8 0-1.5-.1-1.9.4-3.9 5 .7 19.6 17.7 19.6 17 0 21.6-14.6 17.7-19.6")
  .style("fill", "#664e27");

smileyContainer.append("path")
  .attr("d","m33.8 41.7c-.6 0-1.5.5-1.1 2 .2.7 1.2 1.6 1.2 2.8 0 2.4-3.8 2.4-3.8 0 0-1.2 1-2 1.2-2.8.3-1.4-.6-2-1.1-2-1.6 0-4.1 1.7-4.1 4.6 0 3.2 2.7 5.8 6 5.8 3.3 0 6-2.6 6-5.8-.1-2.8-2.7-4.5-4.3-4.6")
  .style("fill", "#4c3526");

smileyContainer.append("path")
  .attr("d","m24.3 50.7c2.2 1 4.8 1.5 7.7 1.5 2.9 0 5.5-.6 7.7-1.5-2.1-1.1-4.7-1.7-7.7-1.7s-5.6.6-7.7 1.7")
  .style("fill", "#ff717f");

smileyContainer.append("path")
  .attr("d","m47 36c-15 0-15 0-29.9 0-2.1 0-2.1 4-.1 4 10.4 0 19.6 0 30 0 2 0 2-4 0-4")
  .style("fill", "#fff");

var tears = smileyContainer.append("g")
  .style("fill", "#65b1ef")

tears.append("path")
  .attr("d", "m59.4 36.9c7.3 7.7-2.6 18.1-9.9 10.4-5.3-5.6-5.6-16.3-5.6-16.3s10.2.3 15.5 5.9")

tears.append("path")
  .attr("d", "m14.5 47.3c-7.3 7.7-17.2-2.7-9.9-10.4 5.3-5.6 15.5-5.9 15.5-5.9s-.3 10.7-5.6 16.3")

var eyes = smileyContainer.append("g")
  .style("fill", "#664e27")

eyes.append("path")
  .attr("d", "m28.5 28.7c-1.9-5.1-4.7-7.7-7.5-7.7s-5.6 2.6-7.5 7.7c-.2.5.8 1.4 1.3.9 1.8-1.9 4-2.7 6.2-2.7 2.2 0 4.4.8 6.2 2.7.6.5 1.5-.4 1.3-.9")

eyes.append("path")
  .attr("d", "m50.4 28.7c-1.9-5.1-4.7-7.7-7.5-7.7s-5.6 2.6-7.5 7.7c-.2.5.8 1.4 1.3.9 1.8-1.9 4-2.7 6.2-2.7s4.4.8 6.2 2.7c.5.5 1.5-.4 1.3-.9")


</script>