Bonus Demos

[00:00:00]
>> Sarah Drasner: There's another way I could have made this. So, if I didn't wanna use morphSVG and I didn't want to use a glue filter, there's a million ways you can do all these things. You don't have to them just one way. We talked about this with the many element scene.

[00:00:13]
Totally cool to make big div over the whole thing, or a big path over the whole thing and then change things, adding a filter totally helps. Or we could use HSL, they're both totally valid ways of doing it. So, Blake Bowen is a really great person to follow on CodePen.

[00:00:34]
He has all sorts of great CodePens, and he did this CodePen sample to show how a Catmull-Rom spline works. Catmull-Rom spline isn't something he invented. But this pen shows how it works really nicely. So he's got these kind of path values, and he's using a Catmull-Rom spline to soften those path values.

[00:00:55]
And this is what a Catmull-Rom spline looks like in terms of code, and if you wanna read more about it, there's an article. About the camel rhyme spline, that if you go on and get super nerdy and find out more about that. It's kind of a similar premise to what we were talking about before with that buzzy A, the motion along the path kind of thing.

[00:01:15]
Not the same, but similar concept. So, here we've got a polygon with a bunch of path points. But we could totally change these polygons around. Like, what if we made a polygon that was kind of like a flame with a bunch of different path points, smoothed that out and then changed, animated the path points around, and then it's just smoothing out that shape the whole time.

[00:01:40]
So we wouldn't necessarily need to use a filter in morphSVG if we didn't want to. Or we could apply the filter still. And not need morph SVG, cuz we know the path points. So that's another way of working with it. I could have made it more programatically. And you can do all sorts of effects.

[00:01:59]
I made this the same way, basically, which is just a bunch of different gradients and shapes, and then For you now the wick. It's like that, you know, wick looking thing and then it kind of decrease in opacity as the smoke goes up. Again, lots of YouTube videos [LAUGH] And watching smoke.

[00:02:23]
I got a bunch of candles and I'm blowing them out and watching them. And you look really crazy when you do stuff like that, but it's also actually a nice way of seeing how things work and move. So if you're thinking, where do I get started, how do I get an idea for an animation?

[00:02:42]
Definitely look around you, and get ideas from the things that are around you.
>> Sarah Drasner: So this pen, I just fixed this to do the Start button. You can't use audio now, unless you have a Start button on the web.
>> Sarah Drasner: [LAUGH] so this is an audio file that I worked with.

[00:03:11]
I took two audio files, the static and the booming, no, that's three audio files, and I put them together. And you know how the rest of these work, probably. I animated a filter, right, that was how that kind of crumbly thing happened. One of the things was DRAW SVG, all of the Missiles.

[00:03:30]
Its Kind of a bumming pens are mean to like bum us all out before the end of the day. And then that scattering apart with all of the triangles what did I use for that I know I'm really testing your memory because there's like way back in the beginning of the day.

[00:03:47]
>> Sarah Drasner: It was cycle stagger. So it was like, remember that pen where things shattered apart? So I basically said go in x, that direction, that direction, that direction, that direction. Go in y, that direction, that direction, that direction, that direction. And then you get a burst really easily, and of course, by creating that burst, I needed a few things to fire at once.

[00:04:11]
I need the filter to fire, I needed the you know, thing to scatter apart. I needed the color to change. What did I do on the timeline to make sure this all happen at the same time?
>> Speaker 2: Entered all particular labels.
>> Sarah Drasner: That's right, I used a label.

[00:04:30]
So, I said, label of boom. And then I made everything happen at the same time. So I could even adjust and I did, adjust all the animation that came before it. And that's, okay because I could go back and the boom was always still the same.
>> Sarah Drasner: So here again, we've got that base frequency, I'm changing some filter stuff around, but you see these tl.call, the formatting got weird.

[00:05:00]
These are all lined up in real life. I have this tl.call add attribute, remove attribute. These are functions. So you can actually call functions within a timeline by using tl.call, and then adding the function in. So what these calls are is that I'm adding the filter into the, I'm applying the filter when I need it, and then I'm removing the filter when I'm done.

[00:05:28]
Because filters can be kind of performance-intensive, so I didn't want it on there while everything else was happening, I don't need it yet. So I add it, and then use it, and I take it away so that it's not affecting the performance of anything else. So here's the add attribute.

[00:05:45]
So I'm setting the attribute, and then I'm applying it, and then I'm removing it. And then here's this pen that my friend Chris Gannon, who's a really amazing animator that you should totally follow on CodePen. He says it's really creepy and he hates it, so I gotta show it to you.

[00:06:04]
>> [MUSIC]

[00:06:06]
>> Sarah Drasner: So each key that I'm pressing, we'll do like a different thing and make different sounds pop in.

[00:06:16]
>> [MUSIC]

[00:06:18]
>> Sarah Drasner: So you know how this stuff is made probably too. So this is Draw SVG, yeah I use that for a lot of weird effects. This F will kind of explore the code of. The rest of these are just timelines. I just retrigger it, I make a timeline that has R tween max or something.

[00:06:38]
And then I retrigger it for each one of these key presses. And I've got some HSL going on in the background. I'm actually making it so that you can keep playing with it, and change the whole scene. And it just stays weird, that's just a choice. So cool, for that balloon basically what I'm doing is I'm, we've got the CX and CY and the radius to make a circle.

[00:07:07]
So every time I hit the key the radius gets bigger, the CY adjust, so that it's like staying in the same place basically. And then ones the radius gets to a certain pont. Then I play a sound of it popping and I have this whole timeline of the balloon kind of scattering and stuff.

[00:07:29]
And then I have a set time out that puts the radius and see y back in the same place again.
>> Sarah Drasner: And, I played with this on mobile and I had the keyboard and I had the keys doing it. But the keyboard kind of covered some of it, and it was really awkward, and I didn't really like it very much.

[00:07:50]
So I just took the palette that I was working with for the drawing, and I stuck in on the screen, and I had people play with that instead. So instead of using the ADSF keys, they can play with this palette and push each button and it activates it that way.

[00:08:09]
The palette is shown to the screen through large and very horrible regex, like really I apologize. But I really didn't wanted to be a media query because I didn't wanted to ever show up on desktop, I just only really wanted it on phones. So in order to do that you apparently need like seven lines of the most horrible red jacks in the world.

[00:08:36]
So if you will look at the code for that, I think there's an apology in comments there. So everyone smiles I gotta tweet that's like it's okay you're fun. But someone just read that code. We talked about how you can use split text to tell a story.
>> Sarah Drasner: So I made this pen and Sarah Swedon showed it in one of her talks and said, how many introverts are in the audience today, and nobody raised their hand.

[00:09:28]
[LAUGH] Which is what we do [LAUGH]. So, you can kinda play around with things and make short little scenes and create stuff.