Timeline

[00:00:00]
>> Sarah Drasner: Let's move on to Timeline. With Timeline, we can stack tweens. We can set them a little before and after one another. We can change their placement in time. We can group them into scenes. We can add relative labels. We can animate the scenes. You can animate your animations.

[00:00:17]
[SOUND] How cool is that? You could take your animation and be like, I need you to go faster, I need you to do this. It's totally manipulatable, that's not a word. [LAUGH] But you can take something like an animation, and then you can play with it, which we're gonna do in just a minute.

[00:00:36]
You can make the whole thing faster, move the placement of the whole scene, and nest them. So here's what that looks like. Instead of using something like Tween Max two, Tween Max two, Tween Max two, we're saying var tl and this can also be anything, doesn't have to be tl, it could be dancing tango monkey pants, but that would be a lot to write every time.

[00:00:57]
So it's kind of for consistency's sake, pretty much everybody just writes tl. Then if you write tl, people know that you're probably talking about Timeline. There's also Timeline Light and Timeline Max, like Tween Light and Tween Max. Again, Tween Max gives you looping. So if you need to loop something, you use Timeline Max.

[00:01:17]
So, here's what's happening. TL.2, we take something that I assume is orange, unless its poorly named. [LAUGH]. And for the first one, it moves something across the screen 750 pixels, right? Orange moves across. Then for green, the next one waits until this one's done, and then the green moves across, sound about right?

[00:01:40]
Yep. Then we've got blue, but we have this strange thing here. This is called an incrementer. So basically what we’re going to say is, whenever this is done, then wait a second, and then have it go. That’s kind of cool, because if i change this to two seconds, it's still gonna wait a second in between.

[00:02:00]
So I can keep changing these numbers. That's something that you can't do in CSS, right? I don't have to change the rest of my code. It will just follow it, and still have the same delays between those, so this is plus one. Mostly, what you're gonna do though is minus one, or minus 0.5, because when you're working with animation in real life, if you look at people moving in real life.

[00:02:26]
I'm gonna make some people mad at me. So I'm walking and I pick something up. What I don't do is walk, stop, and then pick something up, then I would look like Mark Zuckerberg. Sorry that was rude, but that would be kind of robotic, right? I would probably walk, and then before I'm done walking, start picking up my glass.

[00:02:52]
That's a little bit more natural, and human, and stuff. And that's often why some animations look a little stiff, is because they're just doing one thing, and then doing another thing, and then doing another thing. Really, you want overlapping motion. I'm gonna walk, and then sit in my chair in one movement.

[00:03:11]
I'm not gonna walk, and then sit in my chair, you'd be like, what is wrong with her. [LAUGH] You can also do something like this, where you say this, go to two seconds in. This would go to literally two seconds in. So this has to be a string.

[00:03:28]
This can be either a string or a number. I almost never use this. It is very, very not good. And the reason why is it's very brittle. The whole reason that we're using this timeline is to have things flow seamlessly together. If I change this timing to two, this thing breaks.

[00:03:46]
And if I use that all over the place, my animation is gonna break all the time. So I don't suggest using it. The only time I've ever used this, and it's come in really handy, is if I'm matching something up with music. So if I need something to boom, absolutely always happen on a certain beat, that can be really great.

[00:04:07]
And it's like 13 seconds in, everything goes boom! You know, that kind of thing. Then, we have this cool thing called a label. I now use labels for everything. I don't actually even do it this way, I just add labels. You can even see how old my pens are versus how new, like if it's a newer pen, everything's done with labels, and if it's an older pen, it's not.

[00:04:29]
You don't have to work that way, but what I like about the labels is it helps me organize things off of one given point. So, I'm hanging everything off of a certain point. So, I add this label and then I say, okay, something happens off of new label.

[00:04:44]
Then something happens off of new label plus one. Something happens off of new label plus three or four. And I can add as many labels as I want. So I could say, okay, the first label start, then the next label is like, boom. Then the next label is like, walk across the street.

[00:05:03]
Cuz maybe like, at walk across the street, a bunch of things happen. The person starts moving, a dog starts barking, a car stops. It helps organize specific points in time on your timeline. So it can be really, really powerful. And I'm gonna show you a little bit why it's powerful, when we move into the live coding.

[00:05:26]
So here is a really simple timeline. We have var tl new timeline max, or const, or whatever and then you say two, and then here's the element. Three seconds is the duration. Fill changes to white. Opacity is 0.3. I usually organize my code to have the eases always come last.

[00:05:45]
You don't necessarily have to do it that way, but then I always know where to look for them. And then here's another one, so this one goes, and then this one follows. Now here's this, that kind of idea, but nested, and this is how I always will work.

[00:06:02]
Because when I nest timelines, I can create a master timeline and orchestrate many things, and kind of organize my code a little better. So as things get longer and longer, you don't wanna peel through this long, long thing and find something. You kind of take a bunch of movement, it all works together.

[00:06:23]
That's in a function, that's like scene one, then scene two, then scene three, and you can kind of keep going. And then if I need to find something like paint panda, that's in the paint panda section, and I can go just directly to there, and I don't have to kind of surf through my code and find stuff.

[00:06:41]
So I'll set the properties outside of the function. So these are things that are set outside of that timeline, so that it happens to all the elements. Here's the first scene. Function sceneOne. Var tl then timeline. A bunch of stuff happens. But you have to return the tl at the end.

[00:07:04]
I think that's probably the biggest workshop mistake I see again and again. It is like, why isn't it working? It's because you didn't return the tl at the end. Then you can create a master timeline, and you can add scene one, then add scene two, add scene three, and so on and so forth.

[00:07:19]
So if you're just moving a couple things around, you don't need to do something like this. But as you make longer, more complicated things, this kind of structure comes in really handy. Here's another thing, I'm actually adding a label as I add that scene. So I'm adding that scene, and I say label on master, what that allows me to do is seek to that point in time.

[00:07:46]
So I have a memory of a gold fish, like if I'm watching an animation, and it's really long, and I'm trying to like change the last thing that happens. Let's say that that person is kicking a ball, right at the end, if I watched them tumble down the street, pick up some grass, and pet a dog, and then kick the ball, I'm like, wait.

[00:08:07]
What was I changing? I just wanted to focus on that one kicking movement, but by the time I've watched that whole animation go down, I forget what tiny thing I was adjusting. So I can find my way to just the point in time where they're kicking the ball, and not have to watch all the rest of it.

[00:08:28]
So they all of these kinda cool methods that you can use, that speed up development and help you make these longer, more complex systems, yeah.
>> Speaker 2: Can we set properties of multiple items or elements in the first line?
>> Sarah Drasner: Totally can. This el is the same thing as that query selector, so if you wanted to put in those quotation, grab this Id, grab this class, grab these groups of things, you could do that all in one place.

[00:08:53]
Great question. Any other questions before we keep going?
>> Sarah Drasner: Cool. So this pen kind of shows some of the cool things about Timeline. I'm gonna restart it. So here's the animation, there's a bloopy bit that happens in the middle, and then a few other things that happen, and then the bloopy bit happens again.

[00:09:13]
That's the technical term, bloopy bit. So the current position on GSAP timeline, I actually wrap it in a function, and use it a couple of times. Reusing that animation. Then this part happens. And that goes to that part in the timeline.
>> Sarah Drasner: Then this part happens, and I probably don't need to narrate it, you can see.

[00:09:35]
[LAUGH]
>> Sarah Drasner: So, what would happen if I wanted to switch the timing of these animations. I could literally just change two lines of code, and it runs in a different direction.
>> Sarah Drasner: Or if I wanna make the whole thing faster, I make, in one line of code, change the timescale.

[00:10:01]
And the whole thing happens at almost twice the speed. So, if somebody comes up to you, you're working on a project, and you're making this long, complex CSS animation and they're like, but your PM is like. That's good, but it just needs to be a tiny bit faster.

[00:10:18]
Then you're like, God, and you have to spend the entire day adjusting all the timing through your entire thing. And likewise, if you're working in GreenSock, and your PM comes along and says, can you make this whole animation faster? Then you go, yeah, that's gonna take me a really long time.

[00:10:36]
I'm gonna have to take the afternoon and really work on this, and then you go out for a nice long lunch, and you get a glass of wine, and take a bath. [LAUGH] Right? No, don't do that, but maybe.
>> Sarah Drasner: All right, so another thing, I mentioned that TweenMax.set.

[00:10:56]
But sometimes you get this momentary display. Like, let's say you take a bunch of elements and you say, from off the screen, or from opacity zero. Well, there's going to be this micro split second before all the java script loads, where you see all those elements on the page, and then there's a couple pens where I forgot to do that in these demos, and you'll see them.

[00:11:19]
You'll be like, there it was, it just looks really messy. You see all the elements, and then they disappear, and then you can start, the animation starts. The way to keep that from happening is that you set visibility: hidden in CSS, for those elements. And then you set it back to visibility: visible in JavaScript, so as soon as the JavaScript loads, it sets it back to normal.

[00:11:44]
But in the middle of that time, the CSS will always load before the JavaScript does, if you're loading things correctly. So you kind of set it in CSS and set it back. You can also do things like percentage based transforms on SVG. No matter how big these are, it's always 100%, that's awesome.

[00:12:06]
[SOUND] And then, you don't actually really need to do that, because you can have something that's fully responsive in every direction. So I'm gonna let the animation play, and then I can replay it. And I can randomly resize this SVG. But since we're in the middle of the SVG dom, we're moving things not really.

[00:12:27]
Even though it's saying it's done in pixels, it's not really done in pixels. It's done in the SVG coordinate system. So you saw that piece of graph paper shrinking and getting bigger? It's totally stable, no matter how big the SVG is. So you don't really have to worry about all that stuff.