Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values
Skill Level Intermediate
(dramatic flute music) (upbeat music with rhythmic clapping) (slow music) - Hi, I'm Sarah Drasner.
I'm a senior UX Engineer at Trulia, and I'm really lucky because I get to talk about the thing that I like the most in the world which is SVG Animation. I'm also a staff writer for CSS-Tricks, and I've written a lot about advanced SVG animation and in particular GSap for David Walsh blog. There's like a series of articles on there too. So you can find me there as well. I'm a pretty active CodePen member. I'm pretty obsessed with CodePen, and you should be too.
So you can find me on there, as well. I gave all of the demos in this in the CodePen collection. That is one of the resources you were given. When I'm going through all the code for this, I'm not gonna be like opening the entire script and like going through, 'cause some of them are just kind of massive. I'm going to be showing you particularly the parts that I think are interesting to you and are relevant to the thing that I'm speaking about them.
But if you'd like to take a deep, deep dive into any of that code, it's all open source, and you can find all of it pretty easily. So before we get started even animating, I'm just gonna do an SVG Anatomy Overview. I actually don't think that a lot of people know what's inside the SVG DOM, and that's a really pretty important tool that you can use while you're animating. Especially because it kind of looks scary in there to a lot of people, and we're gonna kinda demystify it a little bit.
So why SVG in the first place? It's crisp on any display. For those of you who have to do responsive and image replacement on multiple screens, especially for retina, you know how much of a headache that is. You don't have to worry about that with SVG. It's less HTTP requests to handle because you aren't exchanging all of those multiple files, and a lot of the code that we're gonna be using today is gonna be inline. I'll talk about that a little bit in a minute, but, so then that's less HTTP request to handle, too.
With HTTP 2, you won't have to worry about that quite as much, but we're not there yet, so in the meantime, SVG's gonna really help you out. It's very easily scalable for responsive. I mean scalable as in the name, right? Everything is drawn with math, so it just doesn't matter how big. Unlike a bitmap where you're plotting every single pixel, it's so easy to just make it bigger or smaller, and I'll explain a little big more about how that works, like fundamentally. It's a really small filesize if you design for performance.
The "if you design for performance" part is pretty important there. We'll talk about that in a minute. This is... using SVG for animation, in some ways the design and the technique and the code that you use for it are really intrinsically linked. If you just throw a really complicated SVG together and try to animate it, you're going to sink your page. So we'll kinda talk about some ways of refining that so that you're actually being responsible while you're building these things out.
It's really easy to animate. That's a really big plus. If you try to animate normal images, you have to have multiple images to do every little thing. With SVG you can reach right inside the DOM and you're all pretty familiar with how HTML DOMs work so it's pretty comfortable, actually, to work with it. It's very easy to make accessible. Accessibility is, like, something that's been kind of hot topic lately on everybody's mind. And it's a really interesting and cool way to like make sure that when you're presenting graphics that those graphics are accessible to screen readers.
And it's fun. It's really fun. So I just wanted to have this slide in here to dispel any myths that SVG isn't well supported. I hear frequently from developers that they are scared of using SVG because of the lack of support. That's pretty green. The only times that you're really gonna have to worry is IE 8, but for a lot of the SVG techniques, I'm going to show you some ways to do fallbacks, and then also, there's a good technique to do if you're doing standalone animation techniques where if it falls back to an image, that's okay.
Anyway, we're gonna go over an overview of the SVG DOM. Some of the things that we're gonna be covering are platonic shapes, the ViewBox, PreserveAspectRatio, Grouping, Drawing Paths, and SVG on Export.