Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Jan 23, 2020
Embed
What would you like to do?
Text Transition II
license: gpl-3.0
redirect: https://observablehq.com/@d3/transition-texttween

A demonstration of transitioning text by fading-out the old element and fading-in a new replacement.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
h1 {
font: 400 120px/500px "Helvetica Neue";
text-align: center;
width: 960px;
height: 500px;
margin: 0;
position: absolute;
}
</style>
<h1>0</h1>
<script src="//d3js.org/d3.v4.0.0-alpha.23.min.js"></script>
<script>
var format = d3.format(",d");
d3.select("h1")
.transition()
.duration(2500)
.on("start", function repeat() {
var t = d3.active(this)
.style("opacity", 0)
.remove();
d3.select("body").append("h1")
.style("opacity", 0)
.text(format(Math.random() * 1e6))
.transition(t)
.style("opacity", 1)
.transition()
.delay(1500)
.on("start", repeat);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment