Animating a Smashburger SVG Using GSAP

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.

Hello, everybody. And welcome to another episode of Learn with Jason. Today, you're stuck with me, folks. We're going to play around with some green sock. I've done a couple episodes on it in the past, we'll find out how much I remember. My guess is, not much. This is going to be a fun day of watching me be bad at days, I know for some of you, that is a good time. Strap in, let's get ready. I am working on something to troll Sarah Drasner is the short version. I'm going to animate a Smashburger, which is the superior burger, and I want to do a kind of diagram of it. I'll show you the artwork I've got. But, yeah, so what we're going to do is I've got the burger like this and where the ingredients are kind of expanded so you can diagram it and I want to show thousand to make a Smashburger.

This is actually, I'm joking about trolling Sarah. This is something I've wanted to do for a while. Which is kind of make a in the eventual end goal here is I'd like this to be a scroll telling why I make burgers the way I do and how you can make them yourself. So we're going to see if we can make that work today. I want to see how far we can go. Everything can be a burger if you believe that is a fact. Welcome to the stream, thanks for hanging out. I'm very excited about today. Let's, you know what, I could probably sit here and chat without doing anything for quite a while. But why don't we just jump right over into the stream view. And we'll do a bunch of coding today.

So, as always, we've got live captioning going on. We've got Diane here with us today, thank you, Diane, for helping the captioning, you can see that on the home page of LearnwithJason.dev. The live captions are happening as we speak. That's from White Coat Captioning and made possible through the support of our sponsors, Netlify, Fauna, auth O. Remember, these are all clickable. Give them a clicky.

So, what we're going to do today is play with GreenSock, I mostly remember how it works. We've had, actually, we should find this. Let's find, we've had Greensock. All right. We've got one from Jay. We've got one from Cassie. We've got one from better look up GSAP.

There it is. So this, yeah, we've got the recent one with Jay, we've got the episode with Cassie, where we went and did a bunch of interactive stuff, super fun. And we had a tuning session with Sarah, where we learned a whole bunch of really cool stuff about how to make animations feel more professional. I'm going to fall very short of this episode. So if you see what I'm doing and you're like, wow, that could be a lot better. Yeah, go watch this one and you'll see how.

But what I want to do today, is I want to play with GreenSock, specifically, GreenSock is a very well known library for running animations. It's known as GSAP, you've probably seen that around, as well. But you can do, look at all of the cool stuff people are doing. Here's this, that's all SVG. And that's why I think this is so exciting. You can do really, really interesting things like the WebGL stuff. I've done canvas stuff, it's very, very fun.

My most over engineered thing I've created. If you look the a the very bottom left of the screen mind the learn with Jason logo, there is a tiny little animation there of circles moving slowly and fading in and out. I'm not going to tell you how long I spent figuring out how to make that work, but that's a canvas animation that no one's ever noticed.

That's how I spend my time. What's up, type script tea time, thank you for hanging out. Glad you're here. Zander, I don't know what R3F is. What is that?

Oh, wait. Hold on. React 35er. We did one. Let's see if we can find it. Let's find React fiber. Yeah, we built a cool 3D thing. Look at this thing we were able to build. Like a rocket. How cool is that?

Anyways, this was fun, this is all built in React. It's amazing, you should go definitely check that out. Yeah, so let's dig into this, what we're actually trying to do today. I'm going to show you an animation I did. This one is done with CSS. This is an SVG, and did some CSS stuff. And then, this, there's I'll show you what we did. There's a little bit of JavaScript that removes and readds the animation. So when I click, it starts the animation over, again. And here, there is some, like, basic setup stuff. But we don't care about that. Instead, we're going to focus on the SVG. The SVG for the Burger Champ, that's the whole thing. The outline, the circle. I spend a bunch of time naming things in here to see what spatula it is, the burger. And then, all of the definitions and these are the actual paths that make those shapes.

The cool thing here, we've got the defes down here, but I can set in here's my spatula, left spatula and the burger and animate those things by going in and targeting, like, here's the burger. And on the burger, I'm going to use this burger drop animation. And that burger drop animation is here. So you know, this is kind of like the first approach. Is let's do some animation with CSS. I know CSS, I'm comfortable with it. It's not like, daunting for me to start. GSAP is a little less familiar. It's an API I don't know very well. And there's a bunch of stuff you can do in GSAP, but I don't know the names are for things. It's harder to Google. And that makes me more hesitant to do it. With CSS, I know enough CSS I know what to look for, at least. I know that the animation property exists and I know that transforms exists and I've gotten feedback from pros that are like, oh, yeah, if you want to do the most performant thing, you should be doing stuff, I'm not doing some of that stuff. I should be using the translate or the transform 3D so that it uses the GPU, which I'm not doing. There's stuff to make this more performant. But as a first attempt, this is kind of fun, right? You make that with, you do that with the internet. Look at that. Look at that burger with the internet.

So yeah, this is good stuff. And yeah. OK. So what I want to do today, though, I want to play with this. This is, so here is an updated version of that. This is my Smashburger, the way I do it. The actual illustration of it. And then, I wanted to get into a diagram. So this is the actual way that I make my Smashburgers when I cook them myself. We start with the potato bun, I make my own burger sauce because that's the kind of person I am.

I've got dill pickles that go on the top. I grind my own ground beef because, again, it's who I am. Use American cheese because American cheese is the secret to a good Smashburger, red onions to soak up some of that juice and give yourself a partially fresh, partially sauteed onion, shredded lettuce at the bottom, burger sauce down there and that's the smash burger, the best damage burger you're going to get. I guarantee it.

Burger sauce is not sauce. So what burger sauce is, on a normal burger, you were going to put ketchup, Mayo, mustard, you're basically making your own blend of those types of condiments ahead of time so that you don't have to like do the ketchup, the mustard, Mayo, you have one preblended condiment. It makes production faster, and when I do Smashburgers because it is a production, I like to have a bunch of people over. I end up needing to have an assembly line going. But yeah, special sauce if you really break down what it is is ketchup and mayonnaise with a little bit of mustard or something in it.

But yeah. So this is the way that I have made the Smashburgers. The preparation stuff is specific. I don't know if anybody cares about that. I won't talk about it unless you ask, but here's what I want to do today. I want to be able to show this Smashburger here. And then, I want that to expand like this so I want to have that animation that of being able to explode the burger. I think that's going to be really interesting.

And I think it'll look fun. And honestly, I just, the history here is that Sarah Drasner challenged me to a burger cookoff. And as you can see by this diagram, she's doomed, doomed. And we're going to destroy her.

As part of this, I'm, basically, going to just try to document the whole process. So it's going to be very, it's going to be fun. We're going to have a good time. Anyways, this is kind of me thinking about how do you visualize something like this in a way that's not, I don't want to go to a page and this is all I see. The first thing I want to see is a burger and then, if I want to see how the burger is made, I want to click on it and see these pieces kind of explode. And the way this is set up is each of these things is its own layer. So if I go in here and grab it, like, I can move it around, well, maybe I can. Oh, it's because I'm not in the detached instance. Let me detach it.

Each of these is an independent component of the burger and that gives me the ability to play. And we can do a lot of really cool stuff here. And I'm very much looking forward to it.

So the first thing I'm going to do is I'm going to export this, and we're just going to find out what it does in the, as an SVG. So I've labeled all of my layers and my hope is, my hope of hopes is that what's going to happen here is that each of these is going to come out with something somewhat identifiable as a layer. Otherwise, I'm going to have to do some unfortunate things to get this to work. We're going to try it. We're going to see what happens. Let's go in and we're going to do this in Code Pen because Codepen is fun.

Go in here and create a new pen, and in here, I'm going to take. I guess I need to start on I'm going to put this Smashburger here, that is not helpful. I'm going to have to copy/paste this whole thing into here and that will give me a burger. OK. So then, the next thing I need to do is go in here and figure out which of these is which things. The thing I learned how to do that makes me happy is you set up this defs block. And inside of the defs block, you can identify different burger. I realize I should have left this other one open. Let me go find that.

On page 4 or something. Here we go. Still going. One more. There it is. All right. In here, if I look at my SVGs, I have my defs, and inside each def, you create a group and give it an ID. So I'm going to start by saying I've got a group. And idea's going to be top bun. Not to be confused with the popular movie from the '80s.

Then, I've got to figure out which one of these is the top bun. I can kind of figure that out by colors. If I go in here and look at my colors. I can go and look for this one. No, in here. And now, I've got this that looks an awful lot like a top bun, let me verify that by commenting it out. That's the bottom bun. Hooray, we've got, we're making progress here. Let's get the bottom bun, I'm going to add classes so I can figure out which one of these things is which. Let's get this stroke here.

This one. And that is the bottom bun stroke. Everybody see what's happening? You want me to make this bigger? Oh, buddy. You see that blow up? Wait, how do I make that change? Let's do it with, how about with this? SVG with 100%. There it is. OK. So this will give us a full width burger. So we can make that a little bigger, we can see what's going on. I've got my bottom bun, and this one is the bottom bun stroke. So then, I can take these and, let's just validate that's actually the right one.

Bun visible false. Nice. So this one, then, is going to be what? Maybe you are burger sauce? That's the lettuce. See how fun this is? So we've got our lettuce. And so, once I get this all kind of put into place, I'm going to have to do a some organization to make this a little easier to read. But it's all this starts slow, I promise it'll get faster once I have this organized a little bit. Lettuce stroke, and then,ky come down here and I have a feeling this one is going to be the burger sauce. Nope, it's the red onions. OK. Pattern, my pattern was absolutely incorrect. Yes, I love it. I love it. What was this one? The onions, that's the onions.

This I'm willing to bet will be the stroke for those. Let's find out. Yes, OK, that's the stroke for the onions. And then, we're going to go down to this one which is going to be something. What was that? I legit have no idea what happened. What thing was that? The cheese stroke. Did I miss a thing? I did. That's what got me confused. This one here is going to be the cheese. Bottom cheese and this one is bottom cheese stroke. Sounds like a joke, right? Bottom cheese. Should've started at the top, right? That's the bottom patty.

And that means that you are probably the bottom stroke. That stroke is so subtle that it's basically not even important. And then this, I believe, is the highlight. Yep. OK. Why don't we break this into an actual def while we're here. We'll start with bottom patty. And then, up at the and down in here, we can put this set in, right? And then, what we can do is up here in the main SVG, I can use the that piece. It's going to be used and H ref and spatula. And I think now what I can do is use class bottom patty. And H ref bottom patty.

Nope, I did it wrong. X link H ref. Where have you gone? Do I need to set a view box on this thing? I've got a view box. Where did you go just now? Oh, I have to actually add the ID. The hash. Hey, look at it go. There's our patty back. And, then I've got this group. So what we'll be able to do is kind of collapse these out as they go. And we'll be able to build this out into our actual setup that we want. So that's our bottom sauce. Bottom sauce. And this one is going to be our bottom sauce stroke, probably. OK. This is definitely a little less exciting than, like, a normal stream would be, I imagine. But bottom sauce, we'll drop in the SVGs. And then, up here. We can duplicate this.

And pull in that ref, and rename this. And it's back, OK. Now, we've got two components here and we've got the bottom bun, so we can pull that one out. So let's grab this and we'll set another group up. And then, one more used. All right. Here we go. It's coming together. Now, we've got our lettuce. Let us set up the group.

All right. That's the stroke, we'll pull that out and we'll drop it in here. Our used block set up. And we can change this one to be just lettuce. OK. We've got our groups. Collapse these on down. There's a lettuce, great. And the onions. We'll get the onion stroke. OK. ID, onions. OK. We're just making steady progress here.

Drop that in. OK, collapse this one down. Get this bottom cheese. OK. There's that. And let's collapse this group. And you can see why I'm doing this. These defs are unwieldy, but this is easy to look at. We can see what's happening and I can reason about this. This is the patty, the sauce and we can see the order that things go in. So this patty goes in the back. And then, we want the sauce to be on top of the patty. We want the bun on top of the sauce and the lettuce on top of the sauce and the patty. The onions on top of the patty. We're kind of building up the layers so things show up in the proper order. If I move this around, if I move the cheese over here, it'll fall behind everything.

If I take the cheese and move it here, it disappears behind everything. We need to make sure our order is correct. But this is what's nice about it. It starts at the bottom and moves up. We're building up the SVG as we go. And it'll make it way easier to reason about than trying to scroll through this mess and figuring out what we're doing.

So this is that work that it's, you're cleaning, cleaning the environment, this is kind of the, if you were cooking you call it the meats and plots. It is sure nice to have it done. So this will be our top patty. This is our tops. Let's do the top patty stroke, the top patty highlight. So these three are going to come with me. And there it goes. Now, I can set up the group for top patty. And plops that down.

Get that thing set up. Top patty. All right. Getting close. One, two, three, four more things to do. This one, then, is going to be the cheese, I think. So this is our top cheese. This is top cheese stroke. And I'm going to pull both of these out into a group. Wait a minute, why are there two? That's the stroke.

OK. Figure out what that other one is in a minute. Top cheese. Collapse that down, we'll go up here. This is where I really had multiselect. I don't think it works in CodePen. Then, when you save it, it expands everything, again. Stop it. Leave me alone. Top cheese. OK. So this one, I don't know what you are. So let's find out. This has got to be the pickles. Let's look how complicated this path is.

That's the pickle's color. We'll call this one pickles. The next one down is going to be the pickle stroke. So then, if I take both of these, if I can find the end of it, maybe. Let's see here, that's a complicated path, holy crap. That's what you get for crinkle cutting, right? So we've got our pickles. All right. And I need to get up in here, wait, did I do this wrong? Why isn't that one I screwed something up, hold on. Here's the path, the other path. We get to the end of our defs and why don't you work? What is going on? What is the what's the disconnect? What did you want it like? Oh, I just saved, does that fix it?

That's annoying. Help me. Maybe it's too long and CodePen's like, nah, we don't want to deal with that. Down here, does a weird wrap and pretends it can't understand that, but it definitely can understand that. That's good. So does it work if I use it? Pickles, use the pickles. It works, I don't understand it. I guess that's what life is like for us now. So we'll scroll passed this whole thing. And what I'm going to do as a defense mechanism. I'm going to take the rest of this out of here. I'm going to move it above the defs so we cannot have to scroll past this giant path every time. We'll put these down here. For example, we know, I know, these are our Sesame seeds, right? If I take all of these and the even/odd and this path here, that's the top bun. Then, I'm going to put the group here because I can do that, top bun, and this group is going to let me collapse. Sure is. And then, I can come up here. And we know that the top bun goes at the top, which is SVG land the bottom. The bottom. Some exciting stuff. This one here is going to be, I think, our sauce. There's the sauce. One more used, and we're ready to rock 'n' roll on that and I'll put that top sauce in this one will be top sauce and we have now effectively created our burger in a way that let's us do what we need to do here.

We've got the setup here and I can collapse these defs entirely, and now, we don't have to think about defs anymore, hooray, we have something much easier to access here. So, let's see if we can an animate this thing. And it is possible with this, if I let's make this, say, 300 pixels, I could do something like I don't know, let's do bottom patty. We could say translate X and we'll move it 20 pixels.

It bounces. And we can see here why I have to go change my let's just add, like, a can I multiselect. So what we're going to do is just add a suffix on all of these so that I don't have to edit those groups, again.

And we're going to say path. Because, that's the way things are going to go here. What I'd prefer to do is try to make this something where we can use GSAP to grab this stuff and do some kind of fun, more professional feeling animation. So let's take out that part and instead, let's do this. Let's get the body to display flex and we'll align items center justify content, center, is that going to do what I want? We can set the height to 100VH.

There. OK. Vertically center to div, there, and I can set a background on it, which I liked this color we were using, so let's, actually, no, that's not the color I want to use. I want to use the one from this diagram here. Let's grab that color and we'll set our background color to be this one. OK. So now, we have a burger of sorts. Like, this is set up, we're happy about it. I like the way this is looking. It's feeling good.

And I want to make this animate. So let's get, let's get GreenSock y. The first thing I'm going to do is look for GSAP. And it looks like GSAP is where we need it. So then, I'm going to save and close and we're going to look at the docs. What I want to do, here's my thought. I want to change how do I want to do this? I want to change the SVG to take each section and, like, move it up by certain number, certain distance from the layer below it. I kind of, if each one starts at distance of zero, I want them all to expand to add, like, 30 pixels or so of distance between them. And we'll adjust what that distance actually is. And I kind of want that to, like, stagger a little bit. Let's see if we can figure out how to make this work. Let's just look through a little bit and see if there's anything that jumps out.

So the from to is immediately interesting. Kind of wondering, though, if I can see maybe it's maybe it's a timeline? There's a bunch of things that I'm, this is the kind of stuff I only sort of know how this stuff works. Let's not do a timeline to start. Let's start with a tween. That I sort of know. That's get a tween and start by having it do. How do you do the from to? Do I need yeah, so let's do a to. So what I want is, do I want all of the things inside of the bot? Can I get all of the contents? Get property, get by ID. OK. I might have to might have to jump back to what we built with Cassie because she's better at this than I am. And we're going to learn from somebody who knows what they're doing instead of me jumping on things. Liquid masking is fine, animation learning. Is that one I did? This one? Here's the masking. And this is stuff we did here, so how does this all work? We get GSAP from and then, we select dot rectangles. And then, oh, look. OK. Check this out.

I think what we're going to do is instead of selecting the outer SVG. We'll give all of the layers we want to move a shared class. And then, yeah. Let's do this. Look at our HTML, again. I'm going to call this burger layer. Right? That's I guess we can call it something like ingredient. Burger ingredient now. Each is something we want to animate. Then, I want to do GSAP 2, and I get burger ingredient. And let's try a setting of some sort. I'm going to try Y% 100. Yeah. Why don't we try that? Wobble. Y% X%. OK. So I'm going to Y% 20. So this is not what we wanted.

So they all move in weird ways. OK. So I need to look at what the options are here. Because this is not, but it is, we're in the right direction here. If I start moving these around. They'll start bouncing around in weird ways. But it's based on the individual ingredients height. We're going to have to do something not a percentage. We want it to be uniform. And I need it to, like, loop through and do a, I guess, I want the middle layer to stay put and then, layers below that to go down and layers above that to go up, which might require some trickery that I'm not equipped to do. We'll figure it out, right?

So here's GSAP.2. And we are going to see what our options are. If and we can find them. Parameters, special properties. Bunch of stuff that I don't think is what we need. I need, like, X. OK. So we can just do an X. Oh, you get an index. OK, all right. So target and targets. This is what we need. So I want this. OK. So let's get Y is going to be a function. And everything exploded. You can see that the one in the middle did not.

And so, I think, what I need is let's start, let's start console logging. When in doubt, log everything to the console. So let's do index target and targets. And peek at our console here.

Don't pretend like you don't know what a target is. console. What are you? Are you done? Where is it getting TAR from? Am I missing a closing bracket or something? Why does it? Why are you like this? They should end in place from where you sent it. I think what I ultimately need is a toggle. But I'm trying to at this point, I would settle for does OK. How do I get you to stop doing whatever it is you're doing? I think I need to turn off evaluate on save. Try this, again.

CodePen. Let's go to a new tab. And we're going to try this one, again, I think. Open it over here. And I'm going to turn off the piece that autoreloads. Because that seems to be what's going on. So save automatically, great. Autoupdating preview, no. I'm going to use the run button. That seems like what we need if it's going to catch itself more issues like that. So I want to have to run to get this to function and so, then, by having done this, I can go to my console, run it.

Better use the browser console instead. That's fine. So there's our index and then, we get one target and then, we get a list of targets and there are 11 targets. So I think what we want to do is we want to figure out what the center is. So the center of 11 is going to be what? 6?

Then, you have 5 on either side? Yeah. All right. So I could probably write some fancy math to make that work, I'm not going to do that. I'm going to know. So we know that we've got 11 layers on our burger, what I'm going to say is let's do distance is going to be index minus 6 times 20? 20 pixels that seems OK. So then, we're going to return that distance. And I'm going to log that distance to make sure I'm not doing bad math. I did bad math. Close that, open this, and our distance now is minus 110, minus 111? Minus what?

Why? OK. Does it think it's a string? What's happening? Let's close this up, look at it, again. Maybe I need to do, like, parse int? Oh, wait, it's going to start at zero. That would be different. Let's run that.

Why are they all why are they all doing that? Let me pop this out so we cannot have to play that game every time. Let's keep this over here. So I'm doing something wrong. But let's see if we can figure this out. We're going to log the index, again. Oh, yeah. Duh. Order of operations in math. OK, let's run that, again.

OK. So it got, it got kind of there, let's try it the other direction. Look at it go. This is exciting. So let's see if we can get this to do the thing. OK, that's good. So then, what I need to do is I need to figure out how to get it not disappear when we expand it, which means I need my, oh, I need my canvas to be wider.

What happens when I make this three times taller. Make it 500 and see what happens. Does that blow up everything? It doesn't. It works, oh, kind of? Oh, shoot. Because of the way the layering works here, we're going to have to do custom ordering somehow. I wonder, I wonder if I can do oh, I wonder if I get the target, if the target will give me the actual index? Maybe a data element on it. Then, I can manually order them. I wouldn't recommend for a lot of cases, but target and then that will give me all the HTML properties. OK. So let's do that. It's not the greatest thing in the world. But we can do it. So this will be the way that we order things. Let's get our OK so one two, three, four, five, six, seven, eight, nine, ten, and eleven. And we'll give this data ingredient order. And each of those is going to get a number and I have to order these from, like, one to, or from zero to 11. And so if I turn off this part. Let's just get that out of there for a second so I can look at these. Zero is going to be this bun. Bottom bun is zero. OK. And bottom sauce is one. Lettuce is two. Oh, wait, I did this all wrong. Bottom bun is zero. Lettuce is two, bottom patty is three. This is going to be wild. Onions are four. Cheese is five.

Top patty is six. Top cheese is seven. Pickles are eight. Sauce is nine. Oh and top bun is ten. OK. So now, instead of using the index, what I'm going to do is I'm going to get the order is going to be target, get attribute. Wait. What's that? Document get element by ID a selector.

Then we'll get the body. And we'll do get attribute. Get attribute. And so, the attribute I think is the data attribute without the without the data dash, right? So if I go to ingredient order, wait, I'm doing this wrong. Using data attributes. To do that, I should be able to get data set. OK. I knew there was a way to do this. I'm going to do target data set ingredient order, I need to parse int because we passed it as a string. Then, I can take the order and that means that I cannot worry about that with one and don't need the full list of targets. So we're just going to get that one and then, I can run this, again, and it should do what I want. Do what I want. Do it. This is great. Exactly what I wanted. Let me make this a little smaller so we can see it happen. Let me save. A ha, behold, my bucket. Let's run it. We should get a smaller burger.

And it expands. Yes! OK, all right. All right. This is exactly what I wanted. So now, we have the exploding burger, so the next thing I want to do is make this toggle on click. So I need to figure out how to reverse it so if I'm running this, can I just put my thing down, flip it and reverse it, I think you can, right? .reverse? On reverse complete. OK.

Dot repeat, dot reversed. Yes. That's what I want this seems like I think there's probably a more efficient way to do what I'm about to do. But what I'm going to do here is I'm going to create a function called toggle burger spload. And inside of it, we'll call this. And what I want to do is have, like, if I do reversed true. Actually, we wouldn't need to do that. OK. So how would I do this? We can set, like, a let open equals false, right?

And then, what we can do is let's get the burger equals document.query selector SVG. And we'll do a burger add event listener click. And in that, we will call toggle burger spload, and let's pass in the open status. So we can get open and we'll default to false. So maybe what I can do here is change it like that. And then, we will use open and then, we'll just invert it.

This is, that's a little messy, but it'll do. So let's see if we can make this work. I'm going to save it, I'm going to run it. OK. So I'm not quite right there. Let's see. What did I do wrong? Well, actually, let's try this, no, that doesn't seem right. So the first time I ran it, it was open. And now, when I click, it doesn't do anything. So what I should probably do, then, is console log open. And then, let's console log it, again, down here to make sure it's doing what I think it's doing.

It says it should be reverse true. So when I click, again, it's not actually saving that value. I know why, it's because, OK, if I'm going to use this, I need to just not if I'm going to do globals, I've got to do globals, or else, I'm in for a bad time. This now should work. It is toggling, false true, true/false. It's doing the right thing from a logical thing, but this isn't actually doing what I want. Which means, I'm holding it wrong. If true, a reverse tween will appear paused. Run backwards is true. It needs to run backwards instead of maybe? Let's try.

Run backwards. Is that pleural? Run backwards. All right. Let's save it. Let's run it. It is toggling. When I click, what if I just set this to true. What happens? Will it just explode for me? OK, so it does work if we set that correctly. So why are you oh, wait a minute, wait a minute, wait a minute.

GSAP doesn't work that way. GSAP returns a tween. What I should actually do is I should set this paused. Yes, what I should do, instead. Is I should actually store this output. Right? And then, what I'm going to do instead of running backwards is I'm going to set paused to true. And then, when you what we'll do is we'll say if well, yeah, if open, we're going to animate play and otherwise, we'll animate reverse, I think. And then, we're going to toggle. Let me make sure those things are real things. So if we look at the tween. We have reverse, yeah. OK. Let's give this a try. And let's see if it works. I'm going to save it. I'm going to run it. OK. So it's paused. I click and it opens. Click and it fails. Because I spelled it wrong. OK. This one's going to work, I can feel it. Thank you for catching the typo before I did. Hey, look what we've done, chat. Oh, it's beautiful. OK, so now, I want to play with this a little bit more because there's some cool things we can do. I want to see if this stagger thing works. So, I believe, I can just run this in and I think it'll just work. Let's try it and see what happens.

Thank you for the sub, Luke. Let's run it, again. That's chaos. That's terrible. We don't want that. We want how does stagger work? Let's find stagger. Holy buckets, does that work? Staggers. OK. So what I want to happen, see how cool that looks? From center edges is probably what we want. Let's go from edges, save it, we'll run it. Fine, I don't know, I kind of liked it better when it was let's see.

Can we make API details? We can do a stagger .1 seconds between each. That seems like that's probably the right idea. What's the default? .1, kind of like the .1. Let's do what was the actual thing called? Stagger each .1? What's amount do? Is that a thing? The total number of time that gets split among the staggers. Oh. How about I don't do that? And instead we do the .1. Nope. That's so much worse. Let's do a shorter one, like amount .5? Does that make you work better? Sandwich chefs, I'd like to be a sandwich chef. That's my exit plan, when I fully give up, that's what's going to end up happening. I'm just going to join, I'm going to start a food truck. That's where I'm headed. Let's make this faster, faster, faster, faster. It looks, that looks pretty good. I don't mind that at all. I'm not mad at it. Let's make the duration a little shorter. I think 1/2 second is plenty. Let's run it, again. This is where I'm, like, when I'm using APIs like this, this is what I get excited about type scripts. I really want it to tell me how stuff works.

I also don't like. Is there an index I wanted to start from? Maybe I wanted to start from this, is my easing doing something weird? That seems weird, right? Like, it shouldn't be oh, I know what it is. OK. I know why this is weird. It's because it's not using the order I said, it's using watch the lettuce in the bottom burger, they swap places for a second. You see that? It's because it's not using the right order, which means I need to either choose to, can I set this differently? Like index target. Yes. So I can. It can do exactly that by getting this same information again. So let's do it this way. And we will, yet again, grab this detail. And we will, for this one, we want to make the delay the same on the edges, which means, we need to do like one how would this work?

So if we have at the edges we want zero. And at the center, we want delay a quarter. We want to split the difference and get a percentage for each one with five being zero. And any other amount getting, like, absolute change to be a percentage of one. So if, how would that work? So if zero minus 5 and then, we do the absolute value. Math.absolute would give us 5. And then, we would divide that by 5. And that would give us one. And the same thing would be true, I should make this a comment so it's more clear what is happening here. If I did the same thing with ten, I would get one. Three minus 5 is negative 2 divided by 5 would be .6, right? I should do this in a console where I can check my work. Of zero minus 5 divided by 5 is 1. Math.absolute of 10 minus 5 is 1.

3 is .4, 2, .6. OK. Let's do 8, OK. So that's what we want. We want that, that's going to be how we do our distance is going to be math absolute, so we can return math.abs of order minus 5 divided by 5 times .2? I think. That's .2 seconds is the longest, .25 seconds. Let's do that. Will it save? Does it do what I want?

Math.absolute. So I need to do one minus because I want it to go the other way. That delay is weird. Why is that slow? What do you think? Let's get the value I'm creating. Oh, wait. Wait. Wait. What I'm doing right now, I think it's using linear using or whatever the default is. There is no pink cabbage on this burger, I beg your pardon. What am I doing? I want a console log the value that we're creating here. And I think what I'm doing I'm actually creating like a one second delay at the center or at the edges when it's absolute. So let's try that, again, and let's observe what I'm doing wrong.

I have a hunch. Yeah, look at that. So the way that I'm doing this right now the center delay is one and the outer delays are, like, .75. So what I actually want to do, I want to get it to the point where the center delay is .25 so I should be .5? 2.5. Oh OK. So if you want zero and your maximum value is .25, you subtract from .25.

That's still incorrect? No, that's right. Cool. That's fun. OK. So how are we doing on time here? We're, basically, out of time, aren't we? What time is this actually scheduled to end? I have completely lost track of everything today.

Let's pull this one up and we've got 15 minutes left. In 15 minutes, can I figure out how to take this because here's the next piece I want. I want a little bit more life in this, right? Right now, it's cool, I'm happy, but, what I don't, those outer .75 delays. That's a good question. So the short answer is I just don't.

This math is wrong anyways because I didn't duplicate the value over. So let's try that, again, and see what happens. Starts with .15. Then we get weird values. Zero. That's interesting. Looks good enough I don't care, I think.

Or, actually, you know what, these would be out of order. The layers are out of order. Remember, like, this one is not the bottom layer, it's this one's the bottom layer, it's cycling through the targets in index order not in order order. That actually is correct. That doesn't confuse me anymore.

So what that actually means is these are the outside layers and then, these are the next ones and then, these are the next ones. Does that make sense? Or whatever, these are the next ones and so on and so forth.

So it's just the indexes and the order don't match up, so this list is not in order. This list is in index order not in order, order. We can make that work. And I'm going to clean up the console log so we don't spam the console.

And then, in our last ten minutes or so, I'm going to see if I can get a little bit of jutter in this. What would be really cool if it looked like the burger was falling into a pile, right? That would be fun. I think that would be a lot of fun.

And actually, to do that, what if I what would be the right way to do that? What if I went to the last what if I went to the last one so it was a pile going up? No, that's not right. I'll I don't have enough time to figure that out now. But I'm thinking, wondering if maybe the way it should work is instead of the burger starting in the middle and expanding, it should start at the bottom and pop open. It would kind of be like it would kind of explode upward in a fun way.

So I can make I want look like it was sitting on a countertop or something. I'm happy enough with this that we can ship it. I want to see if I can figure out how to yeah, we can do a little easing on this. That's probably a good call. Let's go play with easing. Ease, ease, ease, we've got built in ones. Probably not quite that much. No. I'm going to need to do custom. None, and then we'll go custom and I can drag out a value. Not going to let me add a point. Don't make me edit paths, I don't want to do that. This is zero one. With one, one, one, one, one? Ease sign out. Maybe I can just drag this. Yeah. That's what I wanted. So let's see if we can do it like that. Not quite that much. We want it to be, like, over here.

Probably want the duration much lower, that will probably make that look less weird. It's fine, not great. It's not my finest work. It's better than nothing, right? Let's take this thing and copy that thing right in there. Oh, don't make me these, come out here, we're going to drop it like so. Save it. Run it and now you've got personality. Nope, screwed it up. GSAP.custom, I bet.

That's not going to work. So how about we do one that does work. Let's change it to let's change it to bounce. That's not great. But it at least lets us do, bounce.out. We're going to do bounce.out.

Save it, try it. So bad. OK. What happens if I want to go in and out. Let's go in/out. It's weird but it's also kind of fun. But you know what I like about this as opposed to having to rewrite my transitions in CSS is I can come in here and poke around and we can try stuff and see what happens. That looks super weird. That's like if you were shooting a cheese burger in a horror movie and wanted it to look unsettlingly unnatural. You want a burger that gives you the heebiejeebies, that's the animation you can use. I think I can sign. OK. I think that will look OK.

Yeah, that's fine. So that's, you know what, that's clean. I'm totally happy with that. That makes me feel like we've got a good setup. I'm going to make this a little bit faster, I think, for the sake of, you know, with that delay, I think it'll make it feel kind of nice. I take that back. Too fast.

Maybe I need to make it a little closer. And this is where the tweaking comes in, right? You're going to spend a million years trying to make this work. I'm going to change it to .4 seconds. That's probably as much as I'm going to do on this today, we'll start tearing down after this. So, I'm pretty happy with that, that looks fun. It's cool, you can see a burger, you can expand the burger, the next steps would be to figure out how to get these to, like, animate in or something. But I'm probably going to do these differently because I don't want not 100% sure how I want to manage this. Maybe what I can do, honestly, is make these into an image or something or actually, you know what, if you do an SVG, you can make it screen reader accessible. I probably would do that.

But I might just, honestly, have this fade in behind it so it's not like, I'm not going to try to animate a bunch of arrows, seems like a bad time. Expand a burger.

Yeah. This is fun, I'm into this. I think this is a lot of fun. I do like it. I'm going to blow this out a little bit more. So it does have room for those arrows without everything being crowded. this was fun. OK. I love animations. I should do more, thank goodness, I thought that just exploded. Expandoburger.

So let's save that. Expandoburger if anybody wants to check it out, you can go and play. But, yeah, this would be super fun, oh, what do we got here? Be cool if you could check various ingredients on and off. That would be cool. That would be really cool. I think that would require, here I've hard coded my center layer, we'd have to figure out how many layers existed and get the middle and recalculate based off of that. There's a few, there's refactors that would need to be done. But after that, you know, because of the way these SVGs work. Because we've got this use, it would be a little bit of a pain in plain JavaScript. But if you were using any sort of templating language whether that's, you know, React view whatever, you could do a logical check. If the box were, a bun is checked or the box for sauce is checked, show this use. The number of, if I get rid of this, for example, the sauce will disappear.

Oh, that's right. I have to run it. So the sauce has disappeared. So we have to figure out how do you adjust height so we'd need some kind of tracking of what the height of the thing was so we could collapse everything down. But yeah, that would be lots of fun ideas with that in ways that you can do that sort of thing. So yeah, a lot of ways we could take this and play, but thank you all so much for hanging out. Yeah. I'm really excited about this. I think this is going to be fun. We're going to troll the heck out of Sarah Drasner. If you see her around Twitter, remind her that I am the best at burgers and she's going to be so sad she ever challenged me. Sorry, Sarah, I don't make the rules. Cool, make sure you head back to the home page of Learn with Jason. We've had live captioning all of this session and every episode, we've had Diane with us today from White Coat Captioning made possible by or sponsors, Netlify, Fauna and you can check out the sponsors, check out the live captioning. And also, while you're there, check out the schedule. We've got really fun stuff coming up. We have Ben Meyers coming on on Thursday. We're going to learn about how screen readers are affected by CSS, which, honestly, I would have thought they weren't. So I'm interested in this episode.

We've got Sarah Diane coming on to teach us about JavaScript autocomplete, we've got Brian Douglas to teach us about GitHub actions and PRs. We're going to learn about flutter flow, I don't know anything about Firebase, well, a little bit thanks to David East, we're going to learn about Blitz JS, command line in RUST. We've got so, so, so many good things. A few more in my inbox I need to add to the site. So make sure you head over here, hit this add to calendar button so you can get all of the latest episodes automatically added to your Google calendar. With that, thank you all so much for hanging out today. I've had a blast, we're going to end with a stampede and go find somebody to raid. Thank you all very much. We will see you next time. CSS SVG