Skip to content

Instantly share code, notes, and snippets.

@TommyCoin80

TommyCoin80/index.html

Last active February 1, 2017 14:57
Show Gist options
  • Save TommyCoin80/525ae682300d91ef6db42a693f86fac7 to your computer and use it in GitHub Desktop.
Save TommyCoin80/525ae682300d91ef6db42a693f86fac7 to your computer and use it in GitHub Desktop.
Download ZIP
Un-truncate Text Tween
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
text {
font-family:Arial;
font-size:16px;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<body>
<script>
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment