Make Animations Feel Pro

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. And welcome to another episode of "Learn with Jason." Today, on the show we have Sarah Drasner. I was going to try to come up with an honorific here, but I don't have enough words. How are you? Hi.

SARAH: I was wondering if you were looking at my name like, wait, what is her name again?
(Laughter)

JASON: No, it just escaped me. No. Sarah is I feel like you're one of the people I've followed for the longest since I've been in tech. I've been familiar with your work for years and years. You've been doing amazing stuff with not just animation but across the board in engineering. You've done incredible things with web development. I've seen you build cool backends. You've worked on giant products. You've built rhinos. There's so many fun, interesting, very innovative projects I've seen come from you. As of about almost a year now, you've also been my boss at Netlify. I made a list when I was at my previous job of who would I want to work with, if I could work with anybody in the industry, and you were like on that list right at the top. This is super fun for me.

SARAH: Yeah, anyone who is asking about the performance review, yeah, this is part of his performance review, which is why he's saying all this stuff.

JASON: Exactly. All of this is a lie.
(Laughter)

SARAH: Please.

JASON: Really just trying to get that I just want to get that acceptable performance rating.

SARAH: It's like an air fryer too.

JASON: But no. You've always been one of my biggest inspirations in tech. I love that you don't take it too seriously, that you just do what is fun, that you're clearly very good at this. With that, I'm going to stop talking and let you actually introduce yourself a little bit.

SARAH: Yeah, I'm super excited to be here. This is the second time I've been on "Learn with Jason." "Learn with Jason" is amazing because two times a week, three times a week Jason comes on here and does this thing like I'm like how are you doing this all the time. I would get so nervous. It's incredible. It helps a lot of people understand things really easily and really well and engage with the processes of things. I'm excited to come on here because I think there are a lot of pieces of animation that we don't totally cover. I'm so excited to go through some of them for you. We're going to go through a ton of material today, and some of it might be quite fast. Because of that, we will link up resources at the end for you to explore further and get a deeper dive and stuff. Yeah, we're going to go through all the things that make things a little more performance, things that make it easier for the user to follow along with, things that make it feel smoother and more realistic.
Because it is a livestream, things will be a little bit you can see on my video it is a little bit choppy. I encourage you to see the animations in real life. We'll link up the links afterwards.

JASON: I'll drop links as we go through them too.

SARAH: They're going to look a little bit choppier on the screen than they are.

JASON: Yeah, for sure. And I do not laugh like a villain, Rovenclasher.

SARAH: That is part of your performance review. It is your resting murder face.

JASON: When I concentrate, I sit quietly, but I'm not emotive. My face is like (indicating).

SARAH: That's him happy.
(Laughter)

JASON: This is a really interesting subject too because I feel like a lot of the things that are well, I guess maybe what you would call communal knowledge, the stuff that seeps into your brain from being around it, I think I might be wrong about the things I believe because for a long time I believed when you do animations, you should try to use CSS and try to use the hardware acceleration of CSS. Because if you use JavaScript, it was going to slow down the browser and make things kind of janky. I'm getting the sense that's incorrect or partially incorrect.

SARAH: Hardware acceleration definitely. There were a couple of other things that came out in the community recently that didn't use the right properties in order to do that correctly, so we'll definitely go over that. Also, JavaScript has a lot to offer. We're going to go deeper into JavaScript today. One thing to note is SVG dominodes don't work like elements, like divs. They don't get hardware accelerated in Chrome. They do in Firefox. You'll often find the way of working with them I have a whole SVG performance benchmarks article that I go through all these things, but you can see JavaScript performs better on those dominodes. The tool we're going to use to do, Green Sock, is going to provide acceleration. Someday Chrome might support it, but Firefox does right now. We'll go through a bunch of things people might be doing wrong. Another thing that is a common misconception is ease in is bad for entrances and ease out is better. I know that that sounds wrong, but that's actually true. We'll go over that as well while we do some live coding so you can see that.

JASON: Awesome. Perfect. Before we jump in, I am going to do a little bit of housekeeping here. Let's switch over to the pairing view. The show today is being captioned by White Coat Captioning. They are available at lwj.dev/live. That is being sponsored by Netlify, Fauna, Sanity, and Auth0.
Sarah's Twitter is Sarah @sarah.edo.

JASON: It's going to get noisy in here today. All right, everybody.
(Laughter)

SARAH: That was the best animation we're probably going to see today.

JASON: That one is not hardware accelerated.
(Laughter)

SARAH: I think we should just end it there.

JASON: Done. Out.

SARAH: We'll show some animations that I've done before. Some of them as far back as 2015 and stuff just to show some basic principles that I think are interesting to cover.
The thing about this pen is I wanted to kind of convey what animation can do is to create a connection between states. What it can do is if there are multiple things changing, rather than popping multiple things in your face every time you brain has to do that, it has to context shift and reunderstand the space. If you click that button, Jason, you can see that turns into a modal. If you hit the contact here, you can see it becomes the email and submit. If you hit the submit, then those become the loader, which then in turn become a success. You really went through multiple states, but you don't feel like it, right?

JASON: Uh huh.

SARAH: If I were to say where is the modal, you would say it's in there. There's no in there, right? It's just a bunch of divs and form elements, just like you're used to.

JASON: Yeah.

SARAH: Because you're doing all of that, you get the spatial awareness. It is straight JS. You get the spatial awareness that feels a little bit more smooth.

JASON: Oh, no.

SARAH: I can link it up. This one is from 2015, so I think it is probably written it's written with Green Sock, the tool I just showed, but probably with jQuery or something like that. I'll show a React pen in just a second that will go through this stuff.

JASON: I'm just going to throw a link so people can go take a look at it. Let's look at this one.

SARAH: Here's another kind of form. If you want to let your users know something happens because you want to reward them, right? You give them your information and credit card, which is scary to do to random people on the internet. The button just turns gray and you're like, what the hell just happened?

JASON: I'm feeling super called out right now, Sarah.

SARAH: In this case, you can fill it out, but you don't have to. You can just click the I didn't put form validation, so you can play with it.

JASON: Nice.

SARAH: You can see the button turns into the loader, which then gives you a success.

JASON: Nice.

SARAH: That's allowing the user to see, okay, I get something's processing. They've done some studies that show loaders, while you're loading information, make people feel like the wait time is lower.

JASON: Yes.

SARAH: The more custom they are, too, the shorter amount of wait time they perceive it. You have this difference between performance and perceived performance.

JASON: Uh huh.

SARAH: Even if you do all the most performant things Eli has a really great talk on this called perceived performance.

JASON: Where is it? Yeah, this is one of them.

SARAH: It's a really good talk. I highly suggest you watch it after this.

JASON: I can find the video actually.

SARAH: I talk about this a lot, too. The talk is called functional animation. I'll link it up in the show notes as well. It talks about that storytelling piece.

JASON: I think that's a good the information in that talk is astounding. I've seen it a couple of times, and it is so, so good.
Let's look at this one.

SARAH: One other thing that's connected to this one in the next one that you were just showing, both of these make use of a thing called overlapping action. What it does is instead of things happening and I think this is kind of like a beginning thing in animation. When you first start, you make a thing happen. Then you make another thing happen. Then you make another thing happen. But nobody moves like that in real life. The point of animation is to mimic reality because really static 2D is an abstraction of 3D emotion, because that's what our brains are used to, is 3D in motion. I would never come into this room and like walk, stop, pick up my water, drink it unless I'm Mark Zuckerberg or something, who eats toast like that.
(Laughter)

SARAH: One movement of walking into the room. Before they're done walking, they pick up the water. Before they're done picking it up, they start drinking something.

JASON: Oh, God. I hit so many buttons so fast. Let me start again. I'm reloading. I think I double clicked. Let's try that again. Click.

SARAH: You can see some of these pieces of action happen on top of each other. The letters don't wait for something else to occur. They're happening kind of staggered and on top of each other.
(Laughter)

JASON: It's an episode about animation. I guess that's what we observed.

SARAH: We can see how these types of pieces are coming through, going one after another, but they're actually overlaying right on top of each other and happening all at once sort of. I'm going to show you how Green Sock and are JavaScript related tools can sometimes give you a thing called a timeline. What that timeline allows you to do is coordinate those pieces of motion. If you want a more modern example this is still don't with create class. You can always tell my React pens oh, no, this is classic stins. You're like, I know when this was made.
(Laughter)

SARAH: For this one, if we refresh, the first thing we do with the bell is to let people know that's even clickable, right? We're gathering their attention. Animation is really good for allowing people to know something is going on over here because animation draws your attention like nothing else. You, as a human being, are trained to respond to motion. Biologically, you're incentivized to think about it. Animation gets a bad rap. Man, that is really annoying. I keep looking at that thing that's not the thing I want to look at. For that reason, you have to be very careful when you animate because you want to be guiding the user. You never want to be abusing it to show off. Let's make a thing happen over here while they're trying to read an article. No, that's really annoying. Don't do that.

JASON: And that's the dark pattern, right? When you go to read the more clickbaity websites, the whole page will jump to slide in an animated ad. I was trying to read this thing and then your text jumps away. You can use it for evil for sure.

SARAH: Exactly. Just because I love animation, doesn't mean I love all kinds of animation. Just like you like web development. You don't like every website. There are things that you are like, ah, that's really nicely done. You know why, because it understands where you're at and it respects you're trying to pay attention for this. I'm pausing for a moment. I need you to know this is clickable, so I'm going to let you know through animation something can move.

JASON: Especially with something like this where this notification bell is here. The reason we have notifications in apps is because if we're doing it right, we're sending something important. What I like about this animation is I imagine people who are watching are seeing this and going please click this bell. I want to know why that's doing a thing. I need to click it. I feel like that's such a nice interaction to just trigger that part of my brain that's like, touch that, I want to know what it does.

SARAH: If you refresh it real quick, you're allowing people to see there's something here. You should click it. When you click on it, this is that example of that overlapping action where things kind of morph into one another. They don't wait for one another. They kind of become one fluid motion. We're going to talk about how that's done. If you click it again, it goes back to that initial state and morphs back into the bell. You always know where to grab it, and you always know where it goes.

JASON: It's so nice to see I love it when everything kind of moves together. My animations are typically cross fades. I don't know how to do like you blooped it. It does a thing and then does this thing and then it is a different thing. That doesn't happen for me. It is really, really fun for me to watch.

SARAH: We're going to do morphing animations today.

JASON: Yes.

SARAH: That'll be really fun. We're going to use hot dogs because that's the only thing Jason and I can agree on.

JASON: It is a sandwich.

SARAH: The other day he tried to control me with, a hot dog is a sandwich, and then I was like, it actually is.

JASON: This is the point where we lose the entire audience.
(Laughter)

SARAH: For those who don't know, Jason is a sandwich anarchist and thinks everything is a sandwich, which is horse shit. Sorry about my language. I made a site called "is it a sandwich" to troll him. It shows him he's an anarchist when he answers all the questions.

JASON: The correct answer is that all of these are sandwiches. Look. The judgment, the judgment

SARAH: It's not a sandwich.

JASON: Anyways, then I made this to troll Sarah. It turns out that she is in fact a sandwich.

SARAH: (Laughter). That's sandwich anarchy though. I'm yelling. Sorry.

JASON: It is important. When I built this site, I did some animations. Let's look at this again. Right? I optimized the hell out of this because I knew as soon as I sent it to her, she was going to do a performance review.

SARAH: The first thing was what the hell. The second thing was I'm so proud of your hardware accelerating.
(Laughter)

SARAH: We should probably teach hardware acceleration.

JASON: Yeah, let's focus up here.

SARAH: I'm not a cake.

JASON: No, neither of us is a cake. A cake is a sandwich though. Need adult supervision here.

SARAH: That's fair. I hate to tell you about our company meetings.

JASON: Tony is saying this is how our Zoom meetings turn out at work. They're worse because we have a bunch of people. It's a nightmare in there. We get nothing done.

SARAH: We get a lot of stuff done while being ridiculous.

JASON: Absolutely.

SARAH: And do that.

JASON: I will say we really have to focus, but I want to say one thing about this team because it makes me so happy. One of the things I love about this team is it is the first time I've really felt I'm a close team that is as weird as I am. At companies, you always find your people. Then you have your back channel chats and whatever. This one is the whole team every meeting. Who wants to make fart jokes for 40 minutes while we also get work done?
(Music playing)

JASON: We've got Angie in the chat. Chance. Cassidy is in there doing the eye mouth eye thing. Hello, everyone. I see you there.

SARAH: Hi, Cassidy. Hi, Chance. I can't say everyone's name.

JASON: I know there are so many people here today. Because there's so many people here, we should write some code.

SARAH: I set up a div. I did some pretty work for some of these things because I knew we would goof off.

JASON: Wise.

SARAH: It's about setting expectations. I am going to show in CSS and then versus JavaScript later, just to show some of the differences. The first thing we're going to do is the wrong way. We're going to show how to animate with a left positioning. I'm going to do this for a reason. Some things I do for a reason.
Beneath here, we'll do at keyframes and give it a name, like Corgi bubbles.

JASON: I approve.
Oh, so we would need to add code.

JASON: Yes, we would.

SARAH: And then 100%. Inside there, we're going to say left 400 pixels. A lot of people do it this way, and this is not the best way. I'll show you how you know this. Yep, we'll do animation. We'll do Corgi bubbles. We'll do one second. We'll just do ease and then do both. I gave us a run button so it is not constantly retriggering every time you type. If you save it and run it

JASON: Save it?

SARAH: Yep.

JASON: And I run it.

SARAH: It should go to the left, right? But it is a little bit jittery. If you can open this up into a debug window if you go to change view and then debug, what the debug mode does is it is usually in an iFrame. In the debug mode, it is not in an iFrame. Go to the dots on the right side of the DevTools. Go to more tools. Go to rendering.

JASON: Oh, that is not where I would have gone. Okay.

SARAH: Then click paint flashing. Now refresh the page. You can see a green box over that. That green box is a bad thing. The green box is telling you that this is not hardware accelerated. It's causing repaints. That paint flashing is when those repaints are happening. If you're trying to figure out if you're hardware accelerating things properly, this tool will allow you to see on any kind of dominodes whether that thing is being hardware accelerated. If we go back into the other panel so the nondebug view.

JASON: This tip alone is worth the price of admission. How do I go back? I need to go back. No, let me out. All right. History. Oh, come on. I think it popped me out of the frame, so I've got to go back.

SARAH: Go to editor or pen, sorry. From here, we'll write in the 100% instead of left transform. In the 400 area, we'll keep that and around it we'll say "translate 3D" and then parens. Keep the 400 comma zero comma zero. Then we're going to copy that line, and we're going to place the same version of that on the div.

JASON: With a zero.

SARAH: With a zero. Basically, that's telling it to be hardware accelerated from the get go, even before we start animating. What that keyframe is doing is telling it to get to the hardware acceleration, but we want it to be accelerating the whole time. Underneath the transform, we can say perspective 1,000 px. You can just move it. Great. Back face dash visibility hidden. All of those properties any one of these three properties will hardware accelerate. I'm showing you all three of them at once, but any one of those three properties just in case you can't use transform for some reason, like you need to set something else, there's probably no reason why you can't, but it is just to show you there are other properties too.

JASON: To be clear, we don't need to add all three of these.

SARAH: Right.

JASON: Right.

SARAH: I typically do just in case, but you don't have to. The tool that we use for Green Sock will automatically do all this stuff for us. You don't have to even think about it.
If we go back to that debug mode

JASON: Wait. Where did it go? I broke it. Okay. And then

SARAH: Now we go back to the DevTools. Click flashing and reload.

JASON: Look at that.

SARAH: You will see zero paints on that div as it moves across.

JASON: Just the beginning and end?

SARAH: That's right, which makes sense because that's when the layout is changing, but it is not doing it the whole way across. During the animation, it's not actually causing all of those rerenders.

JASON: Yeah, yeah. Thank you so much for the bits, Danny. I really appreciate that. I'm just blown away by how many people showed up today. This is super fun. I'm really happy to see y'all.

SARAH: Next thing we're going to do is talk a little bit about squash and stretch and learn a little bit about Green Sock, because we're already running low on time. We have to make a hot dog button before the end of the day.

JASON: That's it. We've got to start a restaurant or something. Just be done with tech entirely.

SARAH: That's right. We were going to do that anyway.
(Laughter)

SARAH: If we go back to the pen view let's remove the keyframes.

JASON: Thank you for the gift of subs. I appreciate it.

SARAH: Animation. There was one more thing I wanted to show. Sorry, sorry, sorry, sorry.

JASON: No worries.

SARAH: Excellent. Like I mentioned before, you might think ease in

JASON: This was the old one that was wrong. Where's the one that's not wrong? This is the one that's not wrong. We'll close that one so I'm not make sure we're looking at the right thing here.

SARAH: Awesome. I mentioned before that you might want to use ease in for eases. That's actually not right. Let's actually put ease in so you can see what I mean by this. If you write ease in and you save and you run, you see how it kind of goes slow to fast.

JASON: Uh huh.

SARAH: That is useful sometimes, but very rarely. Usually what you want is ease out for an entrance and ease in for an exit.

JASON: Oh, yeah. Look at it. It looks like it is scooching to a close.

SARAH: For button hovers, it is ease out. Then ease in for exits. I'm going to show you something now that makes it even more clear how all these eases work and why I kind of love JavaScript for stuff like this.
Instead of doing Corgi bubbles moving across, we want to make it shake its head and say huh uh.

JASON: Here we go. We just had a record today, I think.
(Music playing)

JASON: All right. We want to make it shake, and I am ready.

SARAH: I actually have a 2015 year old blog post that shows the shake animation. Let's just grab the code from there.

JASON: Okay. This is the one?

SARAH: Yeah. We're going to grab these and put them in that one. And then we'll change the name to "shake."

JASON: Shake.

SARAH: Hopefully this works. Save and replay.

JASON: Yeah, there it goes.

SARAH: It goes boop, boop, boop, boop, boop. Basically, it is like shaking its head no. But if you look at the keyframes here for shake, you notice it has to go 80%, 20%, 90%, 10%. It's a lot of code that I had to write to make that happen. I had to write it in two different places. I had to write in keyframes and then the other thing, which is fine for now, but what happens when your animations get really complicated? I do complicated animations sometimes with many coordinated movements. If I do that, I have to layer all these things. Coordinating elements to different positions gets super stringy super fast. CSS is wonderful for small stuff and whether I will UI interactions so you don't have to load an external library. If you want to do something more complex, it starts to break down. It is the same reason we switched from jQuery to frameworks like View and React. Grabbing state out of the DOM works for a minute, but over time it gets really stringy.

JASON: Absolutely.

SARAH: I want to show you two things. One is a site called cubicbezier.com. She's showing how to do all these cubic Béziers. You can grab and go. You can also change them. This is the easing value that we're looking at right now.

JASON: Uh oh.

SARAH: Is it broken?

JASON: No. It just didn't look right for me for the first time.

SARAH: Okay. It's a race. Let's make them race. Who wins? They both will win because they're exactly the same length.
(Laughter)

SARAH: I totally stole that joke from L Head. You can see how this gives you a lot of flexibility on ease in curves for ease in and ease out and whatever you'd like to do. However, in this case you have two handles. Two. That is quite limiting because you can adjust these a bit, but when it comes to really complex motion, like that shake, you have to build it over a lot of keyframes in order to make that work. What if you could just tell that face to move across but you could just give it an easing value. Now go to greensock.com/easevisualizer.
Scroll down a little bit. If you click run, you can see a similar kind of motion that we saw before. But if you click something like Elastic, look at that. You have all of these handles right within just one thing, just the ease. You won't have to do bounce. If you click bounce

JASON: Oh, wow.

SARAH: With CSS, I would have had to write the keyframe up and down, up and down, up and down. Here I say go to here, bounce, and then ease. With things like elastic, it gives you all these ways of working with it. You can even go to elastic and see it has dot out, 01, 03. You can play with all the values here, Jason, as you wish.

JASON: Okay. This is like the interval, like how fast it goes. If I did one, it is going to be like one bounce.

SARAH: Yep.

JASON: If I make it smaller, it is like every 300 milliseconds or something or every 1/3 of the way, something like that.

SARAH: You can also do the one value. That also changes the scale of the thing.

JASON: Oh, yeah. Look at it go. Huge jumps.

SARAH: You have all these ways to tweak it. Now click custom.

JASON: Custom.

SARAH: Above. You can actually totally change this.

JASON: What happens if you do something really wonky like that?

SARAH: Well, that one is broken because it can't go beyond the next one.

JASON: It can't. That makes sense. I wasn't sure if it was going to do some magic.

SARAH: Maybe if I break it the most, it will be magical.

JASON: That's helpful. It shows red when I've done something that doesn't work.

SARAH: That's right. That's right.

JASON: Nice. And a quick retroactive shout out to bald bearded builder. Michael, thank you so much. To somebody gifted him a sub as well. I lost it. Thank you so much. I see Nathaniel showed up with a party of 13. Thank you all so much. It's great to see you.
Holy crap. Look at that go.

SARAH: You can build an SVG path and pass it in.

JASON: If you have no idea what any of this means, I did an episode with Shirley Wu where we went through how to write SVG paths by hand. It made it all so much more comprehensible to me. If this freaks you out, look at that episode because it will demystify it a little bit.

SARAH: I have a course called SVG essentials in an animation. I have every different way to build SVG paths, shapes, Béziers, everything.

JASON: This one?

SARAH: Yes. I'll link that up in the show notes too. It goes through Green Sock and stuff too.

JASON: Yeah.

SARAH: She's like totally unbelievable.

JASON: She started streaming again, and it is really good. Let me do a quick shout out to her. You should go follow her because she's doing very, very cool things. It's a lot of fun to watch. She's doing a visualization right now of whether or not Crazy Rich Asians affected the casting of Asian actors in Hollywood. It is super interesting.

SARAH: She's amazing.

JASON: She really is.

SARAH: She's just a delight. She's just one of my favorite people on the planet.

JASON: Absolutely. Okay. So, this is like clearly way more powerful than what we could do. There's no way I'm going to take the time to write this in CSS. It's just never going to happen.

SARAH: Exactly. And you can do it really, really quickly. Let's go back to Elastic. We're going to go to elastic dot in/out. It will assume you want entrances so it will give you out. This looks like pear shaped a little bit. I don't think we want it to be so aggressive. That seems about right. If you copy that, you can actually well, you can copy the whole thing. That's fine.

JASON: Got it.

SARAH: Okay. Now go into the pen.

JASON: We already have GSAP.

SARAH: I write the search box and it comes up. We can take the frames off because we don't want collisions between the JavaScript.

JASON: I'm going to comment this out so we can share the pen to show both things. Down here, we're going to use this, but we need to figure out how to attach it to things, right?

SARAH: Right. That GSAP dot to, that's a query selector. It is just like your old jQuery stuff. You can write in a string "div" and it would grab it. You can do that with classes too.

JASON: Cool.

SARAH: Dot div or anything like that. You can also use query selectors and grab a bunch of elements in an array and stick it in there.

JASON: We threw it right off the screen.
(Laughter)

SARAH: We don't want Y. We want X. We just want to move it a little bit. We want like X here's another magical thing about Green Sock. Let's format this really quickly. I'm going to make it so you can see it a little bit better. Let's see if I can jump in here. Is it the same one?

JASON: I think it is. Let me make sure I'm in collab mode for that.

SARAH: If I separate them onto lines the way I typically do this for legibility purposes is I will always keep the duration at the top, the properties I'm changing in the middle, and the ease and transform origin at the bottom so I can keep them separated if they get longer. Those types of common patterns are helpful for legibility. I'm separating them down into lines so you can see. I'm going to give it one instead of so long. You can see for GSAP I don't have to hardware accelerate it, but I don't have to say transform, translate, all of that stuff, right?

JASON: Right.

SARAH: I'm just literally saying X. I don't have to write this long line of code above it. Now we can try it.

JASON: Look at her go. You get just a little wiggle.

SARAH: No, no, no, no.

JASON: Oh, geez. Here we go.

SARAH: Someone in the chat said, but it's on a timer. That's a really good point. There's two types of animation. They can't be super used together. One is called game based motion. You give something mass and physics and you send it on its way and it is interruptible. React motion is that way. If you look up React motion colors

JASON: Color animation?

SARAH: Yeah.

JASON: Oh, wow.

SARAH: You can move it and interrupt it, right? Which is really fun. It looks choppy on the screen, but it is not when streaming. A lot of times, what we need to do is coordinate movements. What it can't do is figure out time. If you have multiple movements that you need to coordinate many pieces of at the same time and it needs to be longer where you're coordinating many different pieces of motion on top of each other and you need to be very precise, it can't do that. They're good tools, both of them, and they can't do what the other one does, but they're like really, really wonderful for both things. You have to pick which tool. It's a depends thing.

JASON: For sure. For sure.

SARAH: Pick which tool fits the scenario. Since we're eating a hot dog today, a time based motion like Green Sock makes more sense because we're going to coordinate a bunch of movements for that and not just do one fluid thing.

JASON: That makes sense.

SARAH: I'm just colors now.

JASON: I know. I'm lost. I'm done. Here we go.

SARAH: (Laughter).

JASON: Yeah. This is where you really start to see the nuance, right? At first, it is like I can make this thing move. Then it starts to become what story am I trying to tell by making a move. Am I trying to react to a click? Am I trying to draw somebody's eye somewhere? Am I trying to make the page more polished as I scroll down? Each one of those will have a different technical solution.
I feel like one question I want to ask, is each of these tools its own learning curve? Once you learn the basics, do they feel like you're doing the same thing but with a different wrapper?

SARAH: To some extent, CSS animation and Green Sock are similar because they're both time based. I would say the learning curve of GSAP might seem a little rough at first, but it's very repetitive. You do the same things in the same way. Once you get the hang of it, you can do things really, really quickly. There are some little pieces where you're like why isn't this working like this, which is why the workshop I'm not trying to sell my workshop or anything. Cassie does a workshop. Anybody does a workshop, but those types of workshops where they do a deep dive for eight hours help because it walks you through all the edges you might encounter, which we're not able to go over all of them as we talk today.

JASON: For sure.

SARAH: But I will say it is pretty easy to get going. You can grab an element, move it along. You can go to that ease visualizer, pick up the code, take a div, throw it around.

JASON: And that's literally what we did, right? We came in and copy/pasted this and pointed it at a div and it just worked. Then we can play with it and say let's make it go further. Then I can save it and run it. Now that I know kind of what the general idea is it makes way more sense to me, and I could go in and actually play with this a little bit, which is

SARAH: That's actually what we're going to do now. We're going to do a little bit more coordination with their motion. How much time do we have?

JASON: We have about 45 minutes left.

SARAH: Okay. Let's stay here for a moment. Then we'll do the hot dog thing. If I don't get through the hot dog, I'll give you the end state of the hot dog.
(Laughter)

SARAH: You'll get the same amount of code either way.
We're going to do a few different pieces of motion here.

JASON: Okay.

SARAH: Here let's just change this to elastic dot in/out and take away the params for that. Let's also make it go across by 500 instead of 20.

JASON: Okay.

SARAH: You probably can get a sense of what that's going to do. It's going to go across the screen.

JASON: This is just using the defaults, right?

SARAH: That's right. That's right. Now let's copy that block of code, and then we're going to put another one beneath it.

JASON: Okay.

SARAH: We're going to grab that same div actually, we'll leave it like this for now. I don't have too much time. We're going to do a duration of two seconds. Sorry, 0.2 seconds.

JASON: Oh.

SARAH: That's my fault. And then scale Y instead of X. Okay. Sorry, scale Y.

JASON: Oh, I'm sorry. Scale Y.

SARAH: Then big Y. Perfect. Then we're going to say 0.9. I'll explain what this is in just a second. On the next line, we're going to say transform origin CamelCase. In the string, 50%, 50%. Comma. Great. Then the ease will be power four.

JASON: Like this?

SARAH: No, just power four like yeah, without the elastic in the format.

JASON: Oh, I got it.

SARAH: In terms of the easing values, I know them all by heart now. You will eventually. You're looking at that graph, and you can always go back to that ease visualizer if you want to see stuff, but eventually you know all this stuff in your head. You write like this because that's how we write animation.

JASON: That's how I code all the time.

SARAH: Bear claw.
(Laughter)

SARAH: It's a requirement that as you animate you make noises with your mouth. Sorry. Those are just the rules.

JASON: When we were talking about what we were going to build, you were like, yeah, yeah, we'll get something that's going to be like beep boop pew.

SARAH: Yeah. When I was talking to my husband on Sunday about what we might do, I said we could do a hot dog that goes beep boop pew and then chomp, chomp. I did that for like an hour.
(Laughter)

SARAH: If we save it and play it right now, you can start to see the beginning of what we're going to start to do here.

JASON: Oh, cool.

SARAH: As we're doing it, because it is zooming, I made it scale down a little bit because what we want to do is give the impression it is going super fast. It is so fast that it goes pew. But we also want to make it expand at the end. We don't want to keep it littler. I do the transform origin because I'm telling it it will always do by default to the top left. I'm telling it to scale from the center. That's what transform origin does. We're going to copy that again. Paste below. We're going to say scale Y one. We'll keep the duration 0.2, but we're going to give it a delay because we don't want it to be these are all going to fire all at once. We're going to give it a delay of 0.8 or whatever.

JASON: That way it is the first 0.2 and then the last 0.2 it is going to reexpand.

SARAH: Exactly. Let's save it and run it.

JASON: Pew pew.

SARAH: It did it and it was cool, but it was not quite what we wanted. If you run it one more time, you're like something is off. I don't know what it is, but it is not expanding at the right moment. Here's what we're going to do. We're going to turn this into a timeline and animate our animation. It is going to sound worse than it is, but what the timeline allows us to do is allow us to coordinate those pieces of motion that happen one after each other. We don't have to use delays for everything.

JASON: Yeah. I just got a good callout that we should make these much slower so it doesn't get chopped up by the stream.

SARAH: Don't do that though.

JASON: Oh.

SARAH: You don't need to do that. That's what you need to do in a CSS, and you have to do it to every value.

JASON: Oh, okay.

SARAH: We're going to do something else really quick. What we're going to do is at the top of this do you mind if I just

JASON: Yeah, take over.

SARAH: At the top, I'm going to say GSAP dot timeline. It is going to give me a timeline instance. TL is industry standard for timeline. Instead of GSAP dot 2, I'm going to eliminate the GSAP and hang this off of this. We're not going to have the semicolons because that ends the statement.

JASON: We're just chaining?

SARAH: We're just chaining them. That will go one after another, if we want it to.

JASON: Okay.

SARAH: What we could do here is something like this, which is a decrementer. I could say 0.8 to do it a little bit from the end. We could chain them and have them change relative to each other. If this is confusing, I have a whole section that goes into deeper dive that we don't have too much time to get into today, but I'll show you what I mean by this with a label. I'll say T dot L add. This is the start of the animation. I'll say at this point in the play I'm inserting a label. I can hang things off of that label. I want this to happen at the start of the animation. I want this to happen at the start of the animation. This one I want to happen at the start of plus with an incrementer then we said that delay was 0.8. I'm going to remove the delay. We can see this, if we run it. You have to run it.

JASON: Yeah.

SARAH: It's the same thing. But now at the end write TL go to the next line. Write TL dot time scale in CamelCase. Perfect. End parens. Do 0.2. Now rerun it.

JASON: What?

SARAH: Super slow. If you did a gigantic animation for somebody and your PM comes at the end and says, it's good, but it needs to be faster. You have all these CSS animations and they're all stringy. You have to do what Jason did and change the values. That'll take like eight hours. You do some code and then take a long nap in the hammock. I never do that.
(Laughter)

SARAH: You can adjust any individual timeline. I'll make a master timeline that adds multiple timelines to it so I can coordinate each timeline and make little tweaks of faster and slower, but I can also slow it way down to do things like this. Something wasn't quite right, but it happened too fast for me to see it. If you rerun that again

JASON: Running. Oh, maybe I'm running. Calm down. Whoa, my mouse has decided to misbehave. Let me plug this in. Now is not the time. There we go.

SARAH: What we see when we rerun it is actually it is waiting too long to expand. Let's change that start 0.8 to 0.6. Sorry. What were you going to say?

JASON: I was just going to do what you just did but trying to point it at a moving screen, which would have been foolish. I was going to be like, right there, that's where to do it.

SARAH: There's also a thing in GSAP called seek. If you want to seek to a point in the play head, you can do TL dot seek and it will go right to that spot too.

JASON: What? I want to try this. If I run TL dot seek and I put 0.6

SARAH: It's assuming that the play head is zero to one. It will go to 0.6 of the play head and then play. See?

JASON: Wow. Okay.

SARAH: You can also pause the timeline so you're just looking at that moment. If you go into the timeline at the top and you do an object inside of the timeline as a param GSAP dot timeline and in there make an object and then say paused true, paused with a "D," like in past tense. Save and then run. You can look at an exact moment in time.

JASON: Got it. Now it's frozen here.

SARAH: What's really nice about this too is and I do this sometimes in my animations. I'll pause the animation and give the play head to an interaction so I can scrub the timeline with the play head. Go to in a new window, go to Wall E sdras CodePen. We can change the view to a full page so you can see it a little bit better.

JASON: Oh, my God. I need to start closing some windows. I think it's my mouse. It's fine up here, but my external mouse for whatever reason is oh, Wall E.

SARAH: There's this timeline that goes blink, blink, and he moves around and is like blink, blink. I made a timeline of his arms going swoosh. Then I scrub the timeline with the EX position. At one point in the page, he flips his head. That's a scale negative 1.

JASON: This is awesome. This is super fun.

SARAH: This used to have a sound that went wow.

JASON: Let me redirect the sound here so everybody can hear this. This is super fun.
Wow. Wow.
(Laughter) Wow, wow.

JASON: This is super fun.

SARAH: Cool. We should probably move to the hot dog one. I actually have to use the bathroom. Does anybody ever go to the bathroom on the screen?

JASON: I've done it before. While you do that, I am going to look at this hot dog. I'm going to make sure I have let's just do one of those.
(Music playing)

SARAH: I'll be right back.

JASON: Okay. We have an illustrator file, if I can get over to this window. Oh, no. Is my computer going to rebel? This is the day that it is just going to go off the rails on me. Come on. Come across. There we go.
Sarah made this illustrator file that has a hot dog on it.
You can do it.

JASON: I'm really worried it is not going to do it. I'm worried my computer is going to be like, nah, this is not your day.
Let's look at what's in here. There's a hot dog, right? There's like clipping masks on it. We're going to be able to eat this hot dog over time. Then there's even more fun stuff that we will see. Not 100% sure what I'm excited about is to figure out what all of this does because I feel like this is one of those situations where I'm seeing a plan without
(Music playing)

JASON: I do think we have set a record today. Okay. We've got the the illustrator file is up. I mostly get what it's doing. We've got our hot dog here. Then we have the clip path here. No, not that one.

SARAH: We're going to take a button and turn it into a hot dog. Then we're going to eat the hot dog with a clip path. There's multiple clip paths in here. Right now, we just have one clip, but we're going to bring the clips over and collimate them in a different color. Sorry. I'm getting you lost in the chat. Then we eat the hot dog. Then it reveals that the food is ordered. Then we spray stars everywhere.

JASON: Yes, perfect. All right. I'm ready.

SARAH: Into the hot dog area, that's a technical term. Please remember that for later. You can't even see the screen.

JASON: We're getting fully buried. What we've got up here is the the SVG is up here. Does it have all the clip paths in it?

SARAH: Yeah, and I preoptimized it because I knew we would run low on time. If you need to optimize, you can go to SVGOMG. I'll give you all the links afterwards. We put the cake in the oven and here's the cake, kind of like a cooking show. We have all these different things organized into some groups.
Right now, what we're seeing is oh, my God.

JASON: I'm just trying not to drown in boops over here. Hello, everyone. Hi. I'm still here. I'm still here. Oh, no. Nope, I'm gone. That's it for me.

SARAH: No more Jason. Learn with Sarah.
(Laughter)

SARAH: That's how Sarah took over Jason's screen.

JASON: This is all part of your plan.

SARAH: Now I'm getting covered.

JASON: I think they're going to get us.

SARAH: I saw Cassidy say get Sarah.
(Laughter)

JASON: Oh, my God. They got us. They got us.

SARAH: Oh, my God.
(Laughter)

JASON: Hey, focus up, chat. We've got to look at the screen if we're going to get anything done here.
(Laughter)

SARAH: Is this like when you throw tomatoes at someone?

JASON: I know if this is out of love or if they're like, no, we're done with animation for the day.
This is actually using a little 2D physics library called matter JS, which is super fun because it lets me take the boops and turn them into circles and they have gravity and bounce off each other and stuff. Thank you, chat, for that. That's a memory.

SARAH: I have other Slacks open where people are like serious jamming.

JASON: We need a clip of that. That's a record of most boops on the show so far.
We've got our SVG in here. It is preoptimized with SVGOMG. I actually think I have to do this mouse because I have to figure out what's going on with my other one here. We have our SVG preoptimized. We can see the clip paths are in here for us to use and all the other fun bits. The final button is in here and the stars. Here's our actual button text. I'm going to close this up.

SARAH: Yep.

JASON: Do we need to do any CSS for this?

SARAH: Nope. Well, we might over time, but we'll open it when we need it.

JASON: Okay, great. I am here and I am ready.

SARAH: Okay, great. The first thing to note is that I loaded in a GSAP plugin called morph SVG because we're going to morph that button shape into the hot dog bun and then bring out the other shapes. What we need to do in order to bring in that plugin and I already did it. I can also link up all the code pen safe plugins. You can see it right there. At the top of the file, I say GSAP dot register dot plugin.
The other thing I set up for us is that "order food" button is erect and not the not E R E C T. It's aRect. This is "Not Safe for Work with Jason."
(Laughter)

JASON: Okay. Here we go. It's a rectangle.
(Laughter)

SARAH: It's a rectangle that has circular borders on the sides. I think you need adult supervision here.

SARAH: Yes, exactly. We're not technically working right now, right?
(Laughter)

SARAH: We have the circle. But that rectangle can't be morphed by morph SVG plugin. It needs to be a path.

JASON: Got it.

SARAH: We used a method that they give us called convert to path. We took that rectangle and turned it into path and stored it in the initial button. When the window is loaded, we attach this function that is like hot dog morph. Inside that hot dog morph, I set up a timeline, which is what we've been using previously.

JASON: Got it. Thus far, we haven't done any actual animation. This is the plumbing.

SARAH: This is the plumbing that we set up here.

JASON: Perfect. Okay.

SARAH: The first thing we probably want to do is a label. I like using labels for my stuff. When you start playing with timelines, you don't have to use them, but that is something I like a lot. Get rid of the semicolon at the end of the timeline. Next line dot add. Then we'll call it HD morph or hot dog morph.

JASON: Okay.

SARAH: Cool. Next line, we're going to do dot to. By the way, you can do dot from and dot from to. GSAP is beautifully dumb. It will take things wherever they are and throw them somewhere else. It is very easy to understand it is just grabbing it wherever it exists and throwing it over there. For that reason, if you want to do animations that are repeatable, a lot of times you want to do a from or a from to because you want to retrigger it in the same state. Otherwise, it will just take it from wherever it is.
Moving on, we're going to do inside the string, we're going to do the ID of initial dash text.

JASON: Like this?

SARAH: Yes. And then comma before the parens. Passing it in. Then object. We'll do duration, something like 0.5. Then we're going to do a thing called auto alpha CamelCase and then zero. What auto alpha not only makes it opacity zero but it also does visibility hidden.

JASON: Oh, nice.

SARAH: You can do both of those at once, which is really handy. We're going to attach that to

JASON: Oh, sorry.

SARAH: You can do ease. Let's do sign ease. Yep. Then we can attach that label to it. At the end, before the last parens, yep, we do HD morph. It makes the text go away. You can save it. You can run it.

JASON: Bye.

SARAH: Buh bye. For the next one, use that morph SVG. We're going to morph that button into the button piece.

JASON: Okay.

SARAH: We're going to say dot to, and then we're going to pass in that initial button we stored as a const but not an initial string.

JASON: Oh, got it.

SARAH: Then morph SVG.

JASON: It keeps trying to help me with the formatting, but it's not. It's not helping.

SARAH: I think there's a setting you can turn off.

JASON: I'm ready.

SARAH: Then say morph SVG. SVG is capitalized. The idea I think we need is ID bun front.

JASON: Bun front. Like this?

SARAH: Sorry, sorry.

JASON: Bun front.

SARAH: There's no dash there. I should have kept that more consistent. Sorry.

JASON: It's okay.

SARAH: Then we hang that off of HD morph.

JASON: Hang that off of HD morph like this?

SARAH: Yep. Let's run that and see where we're at.

JASON: Cool.

SARAH: The next thing that we want to do is probably let's see. We probably want to get rid of the hot dog while we're not using it and bring it back, right?

JASON: Okay.

SARAH: We might want to scale it. You know how it kind of gets bigger? We might want to scale it also. What we can do is a thing called GSAP dot set. It sets properties on the hot dog or on the elements before we're using it. Do you mind if I just type

JASON: Yeah, go ahead. Take over.

SARAH: Otherwise, we'll run out of time. Yeah. We've got GSAP dot set and the dog and the bun back.

JASON: I am slow, Tony. I know. Sorry.

SARAH: Scale. Maybe we want it to start at scale 0.5. It is going to start that the point. We're going to say transform origin. We could have done from to or something like that, but it is functionally equivalent. I'm just showing you a different way of doing that. If you wanted to, you can also set those values initially.
I'm also going to let's try it that way. We'll do dot to and we'll do those same ones.
Here's my T shirt. There you go.

JASON: I got this from 100% soft. Let me see if I can find the 's the shop. Go buy all of those things. It's amazing.
Sorry. I'm back.

SARAH: No worries. Here I'm just doing a duration one and a scale one. Basically, what we did is we told it we wanted it to be small. It's in the background, so hopefully it will go behind the thing and then it will get bigger. Then if we run it

JASON: Nice. It does, but it is out of sync.

SARAH: Right. That's where this label comes in really handy. We're going to add the HD morph. Then we can rerun it. Hopefully, that does the thing.

JASON: Beautiful.

SARAH: Nice. Okay. Clap.
Another thing we want to do is probably draw that mustard on as if it is getting drawn on the screen. I'll set up the part for Jason, and then I'll let him animate this. I'll first say GSAP dot set. There's actually a GSAP plugin that will do this for you. You just saw draw SVG zero to 100%. If it is simple, I just write it from scratch because I don't want to load a whole library for something that is like four lines of code. If you don't want to load a whole library, this is the code that you need. I will set it as stroke dash offset and then mustard length don't worry. I will fix this in just a second. Then stroke dash array mustard length. Now what I'm going to do is get the mustard. I'll go up here and say const.

JASON: Got to get the mustard.

SARAH: Got to get the mustard. We don't need that for that. Then we're also going to say const mustard length.

JASON: These are just strings, right? If we wanted to set the labels as a variable or something, we could totally do that too, if we wanted to.

SARAH: Yeah. Totally. The nice thing about Green Sock is it is just JavaScript. I'm using a native JavaScript property called get total length. I'm grabbing the mustard element. Then I'm saying get the total length of however long that path is. Then I set the stroke dash offset and the stroke dash array to mustard length. Imagine that you have a shape, and it has a border that's dashed. That dash, if you made it as long as the shape, you have an offset for that too. You can set that dash as long as the shape, set the offset as long as the shape. At first, all you see the offset. You can animate the dash back onto the page.

JASON: Uh huh.

SARAH: From here, Jason, please do the honors.

JASON: Chat, you were so close. Chat is trying for the rainbow beard. You have to all run the grow command because otherwise it is not going to work. It resets every time it goes off screen. There you go. Get it, get it, get it, get it. There you go. Well done. Gee, you're going to get it off screen. Good job. Well done.
All right. I'm ready. We've got the mustard length. We've got everything set here. That is so nice that it just gets the total length up here. Is that just a thing? Is that a DOM thing? What?

SARAH: When you try to work with animation, start exploring the specs. There's all sorts of cool goodies in there. Sometimes I build animations just to play with whatever the thing is.

JASON: Yeah.

SARAH: Now we're going to do actually dot from. We're going to start from it not being there.

JASON: Got it.

SARAH: Do stroke dash offset zero. Offset is not CamelCased, I believe.

JASON: Got it.

SARAH: That's a zero. Actually, you don't have to do stroke dash array because that is already set for you.

JASON: This is just ready to roll?

SARAH: Do ease circ dot in/out CamelCased. As you work with animation a bunch, you'll know all these values. I know circ is kind of (indicating). Sign is like (indicating). It is really good if you want to move a robot quickly.

JASON: All right. Let's run this and see how it goes. Did I break it? Oh, no. I broke it.

SARAH: Weird. Is there any semicolon where it shouldn't be or something? Because I wrote const mustard and did a colon instead of an equals.

JASON: I got it.

SARAH: Yea.

JASON: Mustard length. Aww.

SARAH: Aww. Why did it break? Where did you go?

JASON: No mustard. Mustard length. Mustard length. Did I screw something up here?

SARAH: Oh, I'm sorry. It is dot to. I'm the worst.

JASON: It's fine.

SARAH: That's going to come up with my performance review. No mustard.

JASON: Why are you so fast?

SARAH: It is because we didn't do a duration. Let's show one more thing. Sorry. Since we're writing one duration, one duration all the time, we don't have to do that with GSAP timeline. We can pass the timeline as an object, and we can say default and then colon duration one. Now they're all going to assume that unless you state otherwise. We can pull it off of there, and we can pull it off of the initial button. Now this should be correct.

JASON: Here we go. Look at it go. Look at that mustard.
(Laughter)

JASON: That's so cool. What I love about this stuff is when you learn what's actually happening like all we're doing is making the line it is a dotted line and we're just making the dash longer, right? That feels like absolute magic. And what's so interesting about it is what's actually happening under the hood is so simple, but it makes it look so professional. I love that. That's like peeling back the curtain. You kind of see what's happening in the background. You realize this isn't sorcery. This is just knowing how things work.
(Music playing)

JASON: I don't know if anybody can hear me with the sound recording.
(Laughter)

JASON: We've got eight minutes left. I feel like what we should do actually are there things you wanted to show at the end for people to go look at?

SARAH: I'll code up the rest of this for you, but what I'll explain is what I will do. When you look at the code later, you'll understand what's going to happen here. That's probably just the amount of time we have.

JASON: You're probably correct. Yes.

SARAH: Right now, we have a clip path, but it is not set on the thing. If you look in the CSS, there's this clip path. Hot dog has a clip path that's currently commented out. We're not going to have set it in CSS. What we're going to do is set it in GSAP. We're going to make a new timeline and attach it to the first timeline. We're going to make a whole other function so things are separate. It keeps things more legible. If somebody is looking at it later, they're like, oh, I go here for the hot dog morph. I go here for the eating part. Then it kind of keeps everything just like normal development.
We'll do a chew dog timeline. In the chew dog timeline, we'll set that clip path on. We're using morph SVG. The clip path is an SVG path too. We're going to take that clip path and morph it slowly to different clip paths.

JASON: Cool. Got it.

SARAH: The interesting thing is we can keep those other IDs off the page. Meaning, they're at display known right now or visibility hidden because they don't have to be in the DOM. They have to be in the DOM, but legible by Green Sock. They don't have to be visible. As long as Green Sock can grab them with that query selector and get that path, we can keep saying now morph it to this and to this path. As that happens, it will reveal beneath it this final button that right now is not visible. It used to be that button wasn't enough space to cover up the final button. We're going to bring the last part of this timeline we're going to bring the final button back onto the screen in 0.1 seconds. Really quickly, so nobody sees it. It is very slight of hand.

JASON: Yeah.

SARAH: The last thing I want to make clear before we get off this thing is what we did for this animation is we built everything first
(Music playing)

JASON: Okay.

SARAH: This is where Jason's resting murder face comes from.

JASON: You, chat. You did this to me.

SARAH: What we did was we built everything first and then we slowly unveil things. The stars already exist. The final button already exists. The clip paths already exist. We're slowly showing different pieces of the animation. I have a procreate tablet, but you can use a piece of paper and a pen. I'll sketch it out real quick. It's really gross looking. It is not for public consumption, but just give yourself a plan and then you carry out the plan.
If I have a really big piece of functionality to write like I'm calling something from the API, I write out the functions for that. I'll sketch it out. I'll write some comments. Then I'll fill it out later. This is no different from that type of development. You kind of get a plan and then you fill out those sections as you go through. That's probably all the time that we have, but I also want to say I'm going to link up all of these resources and the final pen and everything. I'll give Jason all the stuff we had today.

JASON: Yes.

SARAH: You can explore all that stuff later.

JASON: That'll all get added into the show notes. The twitch we play becomes available immediately, but it will be posted on learnwithjason.dev starting tomorrow. You'll have a link to this code pen, to all the resources, to all the examples that Sarah shared as well as some links to educational courses she's created, Eli's stuff.
Sarah, is there anywhere people should go if they want to follow you that's not Twitter? Anything else they should check out?

SARAH: Twitter is pretty good. GitHub and code pen also. I have a GitHub sdras and code pen sdras. Code pen is where I put this stuff. GitHub is where I put here's how you hook an API to a thing and bigger application development, because I do that too.

JASON: (Laughter). That's so good. Chat, thank you so much for hanging out with us today. This was an absolute blast. I have so much fun stuff coming up. We have Alex Banks coming on later in the week. He's going to be here on Thursday. We're going to learn about Apollo federation. Next week, we're going to talk about GraphQL and the Jamstack for the enterprise.
(Music playing)

JASON: Right in the middle of me talking, really? You can take an app and cut it up incrementally. We're going to do stuff on Firebase. Just look at the schedule. There's so much fun stuff going on here.
One more shout out to our sponsors. Thank you to Netlify, Auth0, Sanity, Fauna for covering the captions, which is done by White Coat Captions.
Sarah, thank you so much for coming on. Thank you. You're amazing.

SARAH: Thank you. You're going to pass your performance review.
(Laughter)

JASON: Chat, stay tuned. We are going to go raid somebody. With that, thank you all so much for hanging out. We will see you all soon. Next time, someday. Bye!

SARAH: Bye!

(Music playing)