Skip to content

Instantly share code, notes, and snippets.

@pjsier

pjsier/.block

Created November 13, 2017 03:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pjsier/1454c7595374b23cf02f2dde5938f50d to your computer and use it in GitHub Desktop.
Save pjsier/1454c7595374b23cf02f2dde5938f50d to your computer and use it in GitHub Desktop.
Download ZIP
Image Grid Transition
Raw
.block
license: mit
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment