GSAP Demo

[00:00:00]
>> Sarah Drasner: Okay, live code, this is how I feel when I live code. [LAUGH] All right, live code. We make the text a little bit bigger. We've got some boxes here and we've got our new box here. I'm actually going to, yeah. Let's start by just animating the boxes and not the new box.

[00:00:22]
So I'm gonna take this, I'll say TweenMax.to and then we already have a query selector for all the boxes and then I'm gonna say, okay, one second. And then I'll say y 200 and what happens when I do that? And it will all fall down, right? Cool, not very exciting, maybe we want to have an entrance though, maybe we wanna have all of these things.

[00:00:53]
Actually, I'm gonna get rid of new box for now. Let's just comment this one out for a second. Maybe I wanna have it come from the top and have a grand entrance onto the page. That kinda makes more sense, right? So we can have all of the boxes and we're gonna say from and then we're gonna say, y is -300, I think that will work.

[00:01:16]
>> Sarah Drasner: All right, so it's coming from, it's making an entrance but that's still not very exciting. So maybe we can do one of those things that we saw earlier and we can say bounce.ease out. And then we have all of the boxes and they go bump, bump, bump, nice.

[00:01:35]
Okay, that's a little bit better. Now maybe we want to make them stagger a litte bit so we can say stagger from but we have to also have a delayed amount like the amount between each one of the boxes coming in.
>> Sarah Drasner: [SOUND] Okay, that's a little bit cooler.

[00:01:50]
All right, maybe we want to make it like just a little bit less so that we can see them coming in together. Yeah, that's a little bit better, okay cool. So maybe we wanna make them rotate and just turn over one after another. So we can kind of do this and we can say, okay, take all of these boxes and rotation 90 and we're also gonna use a bounce.

[00:02:18]
in CSS it's rotate, in GreenSock it's rotation, in Mo.js it's angle. I don't know why everybody needs their own name for this. But the naming isn't very consistent, so if you get stuck on that, you're not the only one. That happens to everybody. So we go and we have this but they're all bouncing together.

[00:02:37]
So what I could do is I could say delay one.
>> Sarah Drasner: And they go and then they rotate. But really we talked about the timeline a bunch, right? So maybe we want to use a timeline instead. So I would actually probably remove this delay and change this to tl.

[00:03:01]
Tl and change this to tl. So now they bounce and then rotate. But we talked a little bit about the overlapping action, right? That's not super great because we're waiting for all of them to stop before doing something else. So what will we do here to make them kind of overlap a little bit?

[00:03:27]
Does anybody remember?
>> Speaker 2: Give it a negative delay?
>> Sarah Drasner: That's right, we would give it a negative delay. So I would go after this kind of delayed amount and I would do a string that has a decrementor. We'll start with one but that’s probably not right. Yeah, that's too much so let's do 0.5.

[00:03:50]
>> Sarah Drasner: Yeah, that's looking a little bit better. So what if we wanted the boxes to turn over and then kind of not be sure that they're gonna turn over, and then really turn over? What if we want to have a little bit more kind of emotion in there?

[00:04:12]
Well, we could have the boxes turn over again. I'm actually gonna remove this one for now because maybe you want to see the whole kinda overlapping action happen for that. So I'm gonna change this to 180 and we're gonna have those boxes. They're gonna go and then they're gonna go again.

[00:04:31]
So they fall down, they go, and then they go again. But they're not really like waiting or there's no tension there. So we have these bounces for ease out. Ease outs are good for entrances and ease ins are good for exits. I know that that doesn't sound right but I'm not lying to you and I didn't make it up, you can't blame me for the naming this time, maybe later.

[00:04:55]
So what we might wanna do to have that kind of tension is to have dueling eases to have eases that don't work in different directions. The other thing we might wanna do is we might want to have one take a little bit longer than the other one. If I'm waiting and delaying, I might take a more of a second and then kinda go.

[00:05:18]
So let's remove that and then see where we're at.
>> Sarah Drasner: Fall. [SOUND] All right, so now, we've got it, it falls and they go and they're not sure of themselves, and then they go over, yeah, okay. So what if we wanna reintroduce new box? New box is just gonna chill there while all this other action is going on.

[00:05:45]
[SOUND] Okay, so new box just gonna wait for just a second. I want new box to just stay on the page and not come in with an entrance but also rotate with everybody else. So how might I do that? If I add them all to the timeline, I mean I could do that, what would I have to do?

[00:06:16]
Yeah.
>> Speaker 2: I will write a label.
>> Sarah Drasner: That's right.
>> Speaker 2: Then animation ends then restart.
>> Sarah Drasner: Perfect, so rather than I could bring the new box on and I could say go back in time to a certain point in time. So I could, okay, 3 minus 0.5 and calculate backwards to the point in time on the timeline where it starts.

[00:06:43]
But we talked about labels, if we want all those things to stay in sync, then it makes a lot more sense for me to just apply a label so that they can all move together, right? Does that make sense? So I'm gonna give myself a little space here and say, tl, add and then rotate.

[00:07:03]
Sounds good and then this one is gonna come off of that rotate label. And then this one is going to be now an incrementer instead. I'm gonna change the timing of this to come off of rotate and this was two. But then I walked it back a little bit so it's actually a little too much cuz you could see some tension was overlapping.

[00:07:27]
So I'm gonna go plus equals 1.75, all right. Let's just see where we're at before we start adding any more things, before we break it and we can't find our way back, right? So [SOUND] okay, cool. Now, we can take this and duplicate it. And we can say, all right, I want that to happen for new box too.

[00:07:58]
>> Sarah Drasner: And grab this and we do it for new box. But something's wrong. Does anybody know what's wrong?
>> Speaker 2: So it shouldn't be stagger from, should be stagger.
>> Sarah Drasner: Well, we would have to remove to stagger, you're absolutely right. Because we're not staggering, it's only one element. We've just got one box.

[00:08:20]
So we would change this back into from and remove this because that wouldn't work. There's not multiple elements there, there's just one element. All right, let's try this again.
>> Sarah Drasner: Bounces. [SOUND] So they all move together. Now, if I decided to like, I don't know change this to five seconds longer.

[00:08:46]
If my PM comes in and says, we want that entrance to take forever but the rest of the animation to be the same. Now I can do this. The fox goes [SOUND] and then everybody's moving together.