Animations and Transitions

We talk about the different ways we can animate changes in our charts, and rule out SVG <animate>.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Fullstack D3 Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Fullstack D3 Masterclass

  • [00:00 - 00:06] Alright, so this lesson is going to be really fun. We're going to talk about transitions and animations.

    [00:07 - 00:24] So when your chart goes from one state to the next, it's really nice to preserve the context of the first state to show how it relates to the second state. So imagine you went to a track race and you blink and all of a sudden the runners are at the finish line.

    [00:25 - 00:35] Now first of all, it's not very fun. And second of all, you have no information, you have no idea who won or how they got there, assuming they ran.

    [00:36 - 00:52] So we're going to talk about the different ways to animate our charts and not only is this visually really appealing, but it gives your user that context of how the two states relate to each other. So there are three ways we can animate changes in our chart.

    [00:53 - 01:09] We're going to talk about each of them in depth, but really briefly they are SVG animate tag, CSS transitions and D3 transitions. So let's take a quick look at these SVG animate tags.

    [01:10 - 01:19] So we can see here we have an SVG element and a rectangle. And then within our rectangle element, we have these two animate elements.

    [01:20 - 01:28] Now they don't render anything, but they describe how our square should be moving around. So this first one is animating the X attribute.

    [01:29 - 01:36] It's going between 0, 20 and 0. It's going to take about two seconds and it's going to go indefinitely.

    [01:37 - 01:48] And the second one is animating the fill in a similar way, but it has a different duration. Now this is all we're going to talk about with SVG animates, animate tag.

    [01:49 - 02:05] And that is because when the current browser support is a little bit spotty, and to the future of this animate tag is a little bit uncertain. So generally you kind of want to stay away from this.

    [02:06 - 02:19] It's not really worth learning at this point, but I wanted to show you all just in case you came across it when you were looking for examples online. The other thing here is these are static animations.

    [02:20 - 02:37] So these animate tags are defined within our rectangle, but we might only want a one-time transition between one state and the next. And we don't know those values beforehand and we're editing this in JavaScript.

    [02:38 - 02:46] So these really aren't ideal for what we're going to be doing with our charts. So again, these are SVG animate tags.

    [02:47 - 02:51] Really don't use them. And they're not really worth learning, but I wanted to go over them anyway.

    [02:52 - 02:58] And up next we're going to talk about the two ways which are actually really powerful, which are CSS transitions and D3 transition.