Atmospheric & Elemental Motion

[00:00:00]
>> Sarah Drasner: All right, let's talk about some theory and principle. You might be like, I'm so tired of theory and principle. Don't worry, towards the end of the day, you're going to be like, too much code, go back to the theory and principle. So we just got to get some of the foundations and basics in before we send you on your way learning some of the other more finite details.

[00:00:18]
So atmospheric and elemental motion, sometimes the character of the animation is the whole atmosphere. And this, actually you should probably go look at it in your own browsers because it looks a little bit better there. But some of the dust and speckles and things like that are pieces of the animation that are as important as the big globs and stuff.

[00:00:41]
They kind of set the tone for how that whole space is. And it takes your animation from being something that's like a big flat piece of something moving to something you really feel like you're in the space of. So for elemental motion, further away has less contrast and is blurrier, so by just making a couple effects of making it a little less contrast in color and making it a little blurrier it's a little more believable.

[00:01:09]
You should ask questions, like does the air or environment around it affect the movement of the thing? Like do you have things like leaves blowing because it's windy? You can show that wind is happening by having things affected by that wind. And reducing precision allows for understanding. This might sound weird, but I'm gonna show you what I mean by this.

[00:01:34]
And we can combine some techniques. So if I'm asked to make this smoke, you might be like, what? [LAUGH] How am I going to make this smoke, how does that happen? How does someone animate smoke like that? Well if I reduce the precision of the smoke I can start to notice some patterns emerging.

[00:01:55]
I can start to see that, well, actually the smoke is made up of these little ball shapes. And actually, if I watch those little ball shapes and kind of reduce the detail of them, I can see that what's happening is that as they're coming down, they move to the edge of where that smoke is.

[00:02:16]
And then they hit some sort of air circulation and they go back. And then they kind of circle back down until they get bigger and bigger. Now that's something I can animate, right? I can actually take circles and make them have that motion pattern and then I can maybe apply a filter to that whole thing so that they'll appear like they're one giant shape.

[00:02:39]
So you can kind of reduce precision of some of those elements to get these kind of more advanced effects. So if I'm looking at like sprite and elemental motion for these robotters, they're robot otters, so they're robotters you know. So they're kind of moving through this forest. This isn't like, a great giant pen or anything, but the main purpose of the pen is to show how, if I just showed these two robotters bouncing, it wouldn't be super interesting.

[00:03:10]
But you really get a sense of the space that they're in by showing them in the forest, and having things like that mist come down from the trees. And that's just done with those effects that we talked about earlier with the drop shadows in Illustrator.
>> Sarah Drasner: So here's something, we've got a little background move.

[00:03:33]
We've got like a little hovering effect that we're repeating for both the robotters and their shadows. We make sure that it's opposite, so the shadows are going to get smaller as it gets further away from the robotter, and it's going to be opposite to the robotter. There's a really crazy thing that I had to do to make this animation.

[00:03:55]
Basically, the heart pops, it goes, boop. And if you're using CSS you have to kind of make that first step go up and out and then contract back down. But then there's also this weird thing that happened in Safari where there's a bad SVG bug that didn't allow for opacity and transform at the same time.

[00:04:16]
And the heart just disappears, and it looks really bad, which is really why I used this pen to segue into JavaScript. Because, there are, for SVG animation, JavaScript really works quite well. In a way that CSS is always going to be just a little bit buggy. And if you are thinking, well, CSS has better performance, not so necessarily.

[00:04:37]
Request animation frame for SVG dom nodes has better hardware acceleration and has better support for a lack of repings. Like I've done benchmarks for this then SVG does or then CSS does. So even when people talk about CSS animation being more performant, that's not necessarily the case for SVG in the same way.

[00:05:01]
So we're gonna now start talking about how we would do some animation in JavaScript.