Un-truncate Text Tween

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

text {
	font-family:Arial;
	font-size:16px;
}
</style>

var margin = {top:10,left:10,bottom:10,right:10},
	width = 500 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
	.attr("height", height + margin.top + margin.bottom)
	.attr("width", width + margin.left + margin.right)
	.append("g")
	.attr("transform","translate(" + margin.left + "," + margin.top + ")");

var  text = ["Truncated Text", "Truncated Text can be untruncated with a little bit of work!"];

var ease = d3.easeLinear,
	duration = 3000,
	delay = 1000;

svg.append("text")
	.attr("dx", 5)
	.attr("dy",50)
	.text(text[0])
	.transition()
	.delay(1000)
	.duration(duration)
	.ease(ease)
	.on("start", expand)

function expand() {
	d3.active(this)
		.tween("text", function() {
			var i = d3.interpolate(text[0].length, text[1].length)
			return function(t) {
				svg.select("text").text(text[1].slice(0,i(t)))
			}
		})
		.on("end", shrink)
}

function shrink() {
	svg.select("text")
		.transition()
		.duration(duration)
		.delay(delay)
		.ease(ease)
		.tween("text", function() {
			var i = d3.interpolate(text[1].length, text[0].length)
			return function(t) {
				svg.select("text").text(text[1].slice(0,i(t)))
			}
		})
		.transition()
		.duration(duration)
		.delay(delay)
		.on("start", expand)	
}

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js