Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 01:27
Show Gist options
  • Save mbostock/3145795 to your computer and use it in GitHub Desktop.
Save mbostock/3145795 to your computer and use it in GitHub Desktop.
Mirrored Easing
license: gpl-3.0

This example demonstrates mirroring an easing function such that the transition returns to its starting point upon completion. The mirror function takes an easing function as input (or the name of an easing function, such as “cubic”) and returns a mirrored easing function; the mirrored function reaches the transition destination at t = 0.5, and then returns to the transition origin at t = 1.0.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
h1 {
background: white;
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 500px;
margin: auto;
text-align: center;
}
</style>
<h1>CLICK HERE</h1>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
d3.select("h1").on("click", function() {
d3.select(this)
.style("background", "white")
.transition()
.duration(1000)
.ease(mirror("cubic-in-out"))
.style("background", "red");
});
function mirror(f) {
if (typeof f !== "function") f = d3.ease.apply(d3, arguments);
return function(t) {
return t < .5 ? f(2 * t) : f(2 - 2 * t);
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment