index.html
<!DOCTYPE html>
<html>
<head>
<title>Image Grid Transition</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="600" height="600"></svg>
<script>
var width = 600,
height = 600,
initPicSize = 200,
midPicSize = 100,
picSize = 50;
var svg = d3.select("svg");
for (var idx = 0; idx < 100; ++idx) {
svg.append("image")
.attr("class", idx < 5 ? "initial" : "rest")
.attr("xlink:href", "image.png")
.attr("x", width-initPicSize-25)
.attr("y", height-initPicSize-25)
.style("opacity", 0)
.attr("width", initPicSize)
.attr("height", initPicSize);
}
d3.selectAll("image.initial")
.transition()
.delay(function(d, i) { return i * 250; })
.duration(250)
.style("opacity", 1)
.transition()
.duration(1000)
.ease(d3.easeBack)
.attr("transform", function(d, i) {
return "translate(" + ((i % 10) * midPicSize) + "," + ((Math.floor(i / 10)) * midPicSize) + ")";
})
.attr("x", midPicSize * 0.05)
.attr("y", midPicSize * 0.05)
.attr("width", midPicSize * 0.9)
.attr("height", midPicSize * 0.9)
.transition()
.delay(function(d, i) { return (5 * 250) - (i * 250); })
.duration(350)
.attr("x", picSize * 0.05)
.attr("y", picSize * 0.05)
.attr("width", picSize * 0.9)
.attr("height", picSize * 0.9)
.transition()
.duration(250)
.attr("transform", function (d, i) {
return "translate(" + ((i % 10) * picSize) + "," + ((Math.floor(i / 10)) * picSize) + ")";
});;
d3.selectAll("image.rest")
.transition()
.delay(function(d, i) { return ((i + 5) * 50) + 2600; })
.duration(500)
.style("opacity", 1)
.transition()
.ease(d3.easeBack)
.attr("transform", function(d, i) {
return "translate(" + (((i + 5) % 10) * picSize) + "," + ((Math.floor((i + 5) / 10)) * picSize) + ")";
})
.attr("x", picSize * 0.05)
.attr("y", picSize * 0.05)
.attr("width", picSize * 0.9)
.attr("height", picSize * 0.9);
</script>
</body>
</html>