Enter/update/exit animation
Now that you know how to use transitions, it’s time to take it up a notch. Enter/exit animation.
Enter/exit animations are the most common use of transitions. They’re what happens when a new element enters or exits the picture. For instance, in visualizations like this famous Nuclear Detonation Timeline by Isao Hashimoto. Each new Boom! flashes to look like an explosion.
I don’t know how Hashimoto did it, but with React & D3v4, you’d do it with enter/exit transitions.
Another favorite of mine is this animated alphabet example by Mike Bostock, the creator of D3, that showcases enter/update/exit transitions.
That’s what we’re going to build: An animated alphabet. New letters fall down and are green, updated letters move right or left, and deleted letters are red and fall down.
You can play with a more advanced version here. Same principle as the alphabet, but it animates your typing.
I wish I could embed a gif… it’s 2017, and this is an electronic book, and I still can’t embed animations. Silly, isn’t it?
We’re building the alphabet version because the string diffing algorithm is a pain to explain. I learned that the hard way when giving workshops on React and D3…
See? Easy on paper, but the code is long and weird. That, or I’m bad at implementing it. Either way, it’s too tangential to explain here. You can read the article on it.
Animated alphabet
Our goal is to render a random subset of the alphabet. Every time the set updates, old letters transition out, new letters transition in, and updated letters transition into a new position.
We need two components:
Alphabet, which creates random lists of letters every 1.5 seconds, then maps through them to renderLettercomponentsLetter, which renders an SVG text element and takes care of its own enter/update/exit transitions
You can see the full code on GitHub here.