Transcript from the "Tools Overview" Lesson
[00:00:03]
>> Sarah Drasner: So let's talk about some tools. One thing that people ask me a lot, so I cover just a little bit, is why we're talking about SVG animation versus something like Canvas, and when to use each. Because sometimes that's confusing for people. So Dom/Virtual Dom, basically SVG animation, is great for UI/UX animation.
[00:00:22] You're not going into a different context, right, all the stuff is already on the page in there. It's already in your application, and you're just putting a class on it, or targeting, it or grabbing it with refs or whatever and moving it around. It's great for SVG that's resolution independent.
[00:00:39] It's easier to debug. If something breaks down and it's in y our DOM, you can go grab it. And even if it's, kill me, [LAUGH] it's still there, you can kind of debug, and see it, and feel it. Whereas if a Canvas has something that goes wrong, it will break to nothing.
[00:00:57] And you're mostly then console logging and stuff like that, which is fine too, but it's kind of a different system of debugging. Cons, it tanks with a lot of objects. And people get really nervous about this, they're like, no, a lot of objects, I can't animate five things.
[00:01:14] [LAUGH] No, you can animate hundreds of things, sometimes I animate thousands of things. But once you get past a few hundred, that's when gonna you're really start to see and feel things not going so well. There is a thing I keep trying to push through with the Blink team to try to get them to support hardware acceleration and SVG better.
[00:01:40] And I feel like they just keep moving things around on me. I'm like, but wait, please, so I can send you guys there if you wanna vote on support for that too. So it is capable of being better supported, it's just that they don't put resources to it.
[00:01:54] That's partially because they have a lot going on, there's a lot of things to support out there, so they have to prioritize. Because it tanks with a lot of objects, you have to kind of care about how you animate, you can't just kind of throw things all over the place.
[00:02:10] Canvas pros, Canvas doesn't quite, I mean, you still have to kinda care about how you animate, but not quite the same way. It's really dense, pixels dense. If you've ever gone to Awwwards site, you know which one I'm talking about? [LAUGH] Everybody is like, yeah, yeah. [LAUGH] And you fly around on a broom through Hogwarts, or you look at these crazy, beautiful things.
[00:02:33] That's all Canvas, it's WebGL, and Three.js, and it's in a Canvas kind of context. It's capable of so much beautiful stuff, and you can, it's really performant, the kinda things you can kinda spur up are kind of incredible. So it's great for really impressive 3D or immersive stuff, it's great for a ton of objects.
[00:02:56] So if you're working with a data visualization, and you've just got a few things going on, or maybe even just hundreds of things going on, totally, SVG is awesome. But if you have thousands of things going on, my friend Shirley who does another course here, she does this D3 course here.
[00:03:14] She made this visualization of every line in Hamilton, and it was beautiful. But while she was working on it, we started becoming friends. And she's like, hey, all of these things are kind of, I'm trying to move them all over the page and the performance kinda tanking. And I was like, let's move this over to Canvas from SVG.
[00:03:33] And then it did it beautifully and was doing a good job. So sometimes you have to switch things over if you're talking about movement of thousands and thousands of objects. Cons, it's harder to make accessible. You don't have, unlike SVG that has a navigable DOM, Canvas doesn't. Canvas is just that one element.
[00:03:54] So if you have text in there, if you're telling a story in there, you're really kinda leaving screen readers out in the dark. Which may matter or may not matter, depending on the context. But people do get sued for not having accessible sites, so keep that in mind.
[00:04:09] You shouldn't have contact forms and things like that inside of a Canvas context. It's not resolution independent out of the box, but if you click that link, there's a link to an egghead tutorial, it's about minute, 30 seconds long. That shows how to make it good for high pixel density screens.
[00:04:32] Like I mentioned before, it breaks to nothing, so you don't even get the kill me now part. You just have nothing there, so you have to kind of set breakpoints and do all the other kinda normal stuff, you don't get any visual indicators of what's going on. So correct tools for the job, here are my recommendations.
[00:04:50] Again, opinion land, this is opinion land. CSS, SCSS, SASS, LESS, what have you, are great for small sequences and simple interactions. But once you start to chain the interactions with more than three things going on, I really suggest you switch to something like GreenSock. And part of the reason is, let's say you have a bunch of things going on.
[00:05:15] You have a guy walking down the street, and then he hits a pothole, and then something else flies up. And somebody comes along and says, it's okay, but I don't like that first part, where this thing happens, can you change the timing of that? You have to go and change all of the subsequent timing of everything that happened to him and everything that happened around him, anything that is affected by him.
[00:05:41] So once you get to these kind of more sequenced things, JavaScript is much more powerful. And you'll see some of that when we talk about timeline in a minute. So it's great for sequencing and complex movement. It's really great for cross-browser consistency. If you're not super excited about making all of those weird hacks that you saw about the Safari heart pop, and that's just like a heart popping, that's [LAUGH] one tiny thing, that's a really good reason.
[00:06:11] There's all sorts of weird browser things that you have to kinda compensate for when you're working with CSS, that GreenSock just takes care of for you. They've been working on GreenSock and TweenMax forever, so they've really fine-tuned things that even the spec has a kinda strange way of interpreting.
[00:06:34] One last thing I'll say about this. CSS and SCSS, remember when we talked about the cubic beziers? Let me jump out of here for just a second. So if I go to cubicbezier.com, here are the kinda things that were, and this is made by a friend of mine, Lea Verou, she's brilliant.
[00:06:52] So you can kinda play around, and you can build your own bezier curve. So these are all easing curves that you can make and you can try them. Should we have a race, who's gonna win, wanna guess?
>> Sarah Drasner: They're always gonna tie! It's always gonna happen for the same amount of time.
[00:07:11] It'll look like one of them's going faster than the other one, but they're always gonna be the same amount. And then we have GreenSock Ease Visualizer. So those cubic beziers, they have two handles, right? Check this out, what? You can get a realistic bounce just by giving it an ease, which is really cool.
[00:07:37] That means I'm not doing, like in CSS, I'd have to go here, go here, go here, go here, go here, go here, go here, over, and over, and over again. With GreenSock, I can basically say that I want it to bounce. I can even adjust the configuration of the thing and change the way that that back looks or like elastic.
[00:07:59] I can make it like, make it really bouncy, make it less bouncy, make it super bouncy! And they show you a bunch of different ways. There's a clock, whoa, there's boxes. It's a race! No, they're all going to end up at the same time. [LAUGH] So you can kind of compare and contrast.
[00:08:21] They even have a custom one, where you can kind of create your own. This one needs a plugin, though, you actually have to get a plugin in order to work with this one. Cool,
>> Sarah Drasner: So that's pretty nice, that's pretty great. React Spring, React-Motion, there's all sorts of Spring kind of libraries.
[00:08:44] Those are really great for single movements that you'd like to look realistic. There are actually really beautiful easing curves. But it's really for sending one thing somewhere, not for a bunch of sequenced movements. So if you wanna do a realistic touch base movement that's interruptible, like if you have chat heads you're dragging around the screen, that has interruptible motion, so that's really nice.
[00:09:09] But it won't do stuff like this person walks over here, then this person goes over here. I have a whole lengthy reason for why that's not suitable for that if you're interested in digging in some more of that, but we'll keep going for now. People ask me about Snap.svg.
[00:09:26] Snap.svg isn't really an animation library, it's jQuery for SVG. And in fact, if you look at the examples on the site, there's beautiful animation examples, they're really done with CSS animation. And if you ask Dmitri Baranovski what to use for animation in SVG, he says use GreenSock. I have a text message from him that's like, just use GreenSock.
[00:09:52] Anime.JS is a lot like GSAP, and it's fully open source. GreenSock is not fully open source, the base of it is fully open source. Although the part of Anime.JS that's covered is the same thing that's in the open source version of GreenSock. It's just that GreenSock has a bunch of other plugins.
[00:10:11] Anime.JS and GreenSock work the same under the hood, they both do request animation frame. So at that level, it's basically which surface API fits you best. And if you need to use any of the plugins, then obviously, GreenSock. Web Animations API looks great. I said we're still waiting on support, but truthfully, the support has been deprioritized.
[00:10:36] So I wouldn't even say that it is worth it to learn The Web Animations API until the support gets reprioritized into something that they care about. Velocity is similar to GSAP, but it has less bells and whistles, and last I checked was not as performant. But run your own tests, for sure, check it out yourself cuz it's been a long time.
[00:10:58] Mo.js was one of my favorites, and I have a whole deck that is available to you, just full of crazy Mo.js samples. But he said that he's no longer going to pull it out of beta and keep working on it because he thinks GreenSock is what people should be using for animation.
[00:11:16] You're catching a pattern, right? [LAUGH] A lot of other people who worked with SVG and SVG animation are like, just use GreenSock. They've been around since the flash days, and it was back in ActionScript, and then they eventually moved to JavaScript. And they've been building this tool for ten years, so they just have a leg up on other people.
[00:11:35] They also do this full-time, there's two of them, and they do this full-time for a living. So it's kind of got more support and more care put into it for a greater amount of time than a lot of other people's open source projects. D3.js was built for data vis, but you can do a lot more with it.
[00:11:53] Those are kind of chained transitions, so it's very like, and then do this, and then do this. So of course, you can hook into it using. If you're used to D3, you can use to kind of plug in at different levels, and kind of connect it to things like scrolls and things like that.
[00:12:12] So D3 can be a really nice abstraction to use too.