Let's do a couple of lessons with gsap. We could do a lot more, but I'm going to try to contain myself. Let's start by doing a simple animation and then stack it on the timeline. All right, so as often our starting point will be a square. You can see a div with a class of square here, and I have this gsap that TS file already hooked up. As for the few previous lessons, the first thing to do is to NPM install gsap.

As for the few previous lessons, the first thing to do is to NPM install gsap. I have done it so I won't do it, but go ahead and start with that. This will add G SAP in your dependencies and so you're ready to go. So we'll start by importing this key, uh, G SAP object import G SAP from G sap. And let's start by wearing a basic animation that you sort of now know how to do across multiple libraries.

And let's start by wearing a basic animation that you sort of now know how to do across multiple libraries. Gsap dot and we'll use two. We will target, uh, that square and let's go X 100. And by just doing that, let me save a few times. You can see den nice animation. Again, we have a default easing timing function and duration without having to specify it. And also the square stays in its final position. We don't have to go animation fill mode forwards.

And also the square stays in its final position. We don't have to go animation fill mode forwards. All the nice conveniences that we found in other libraries are also available here. One really cool thing about gsap is you have GSAP two and you also have gsap from, so if I change it to from the square will start from a hundred pixels and animates towards the default position. Let's save that again. Very nice. Yeah. And conveniently enough, you also have gsap from two,

Let's save that again. Very nice. Yeah. And conveniently enough, you also have gsap from two, which is going to complain that it's expecting a second, uh, object with properties to animate. So this is from the first object and this second one is two x 400 Y 100. So now the square is going to start at 100 pixels and maybe let's not go that Y let's start at X zero and go X 200 here. And so now we have the two

and go X 200 here. And so now we have the two and from define, alright, let's backpedal to just D two and I will go X 100 and then remove the second one. And let's make this animation a little bit more complex so that it calls for a timeline sequence. So let's duplicate this and change it to scale 0.5. And let's have one more. And this one will be scale of one and X of 200. So I'm defining three animations

And this one will be scale of one and X of 200. So I'm defining three animations and my expectation is they will all fire at the same time and create a bit of chaos. Let's take a look. I'm going to save. And yeah, it's sort of, uh, blended everything and it just goes from X zero to X 200, the final destination. Now let's try to gain control over the sequencing. So here I can go duration of one second

Now let's try to gain control over the sequencing. So here I can go duration of one second and let's add that to all three. Like copilot is suggesting. And now because the first one lasts one second, what I could do is here have a delay of one second. And so here we add one second two seconds. So here I could go delay two seconds, it's a bit messy, but now I feel like it's going to run the first sequence. Then run the next sequence and then run the third one.

but now I feel like it's going to run the first sequence. Then run the next sequence and then run the third one. Let's try that. Scale down and travel to the third one. So it worked perfectly, but you can see the shortcomings of this approach, right? If the duration of any of the segments was to change, the whole thing would fall apart. Matter of fact, let's do this. If the first sequence was to last three seconds, it would completely mess up the animation

If the first sequence was to last three seconds, it would completely mess up the animation or make it different, I guess. And we will need to update these to three and then these two, four seconds. And now the animation is going to work properly again, but I don't think it's no way to live your life. Okay? And so that's a simple example, but this is precisely what gsap timelines are for. So we're going to convert our codes to use a timeline

but this is precisely what gsap timelines are for. So we're going to convert our codes to use a timeline and then we are going to sequence those, uh, by adding them to the timeline. Check this out. It could not be easier. Cons, TL equals gsap timeline. So all I have to do is instead of hooking up to the GSAP object, I can hook them to my TL timeline. So I can replace these gsap two, three times with tl. Two, let's get rid of the duration properties

So I can replace these gsap two, three times with tl. Two, let's get rid of the duration properties and I will also get rid of the delay for both. Like, so. So now I have a clean timeline sequence and no matter what the duration of one is, the next one we will wait for it. So let's save again. You can see that it sequences perfectly, but now if I was to have a duration of three seconds here, this is going to wait to proceed

but now if I was to have a duration of three seconds here, this is going to wait to proceed to the next step of the timeline. This is powerful. And of course, as you can imagine, DTL object will have lots of, uh, capabilities, something like play pose, reverse, uh, progress and all sorts of things. So if I was to set progress to 0.5, you'll see that it jumps into halfway through and then runs through the animation.

that it jumps into halfway through and then runs through the animation. If I was to go TL pose and then sets the progress, it'll be pose at 0.5. If I go 0.9, it'll be almost finished. And if I go one, it'll be the end position. That means that you can very easily hook that up with some buttons that let you play, pause, rewind, and so on. You could also have an input range slider

rewind, and so on. You could also have an input range slider that you can hook up to the progress value that we've just looked at so that you can scrub back and forth. Let's take, take a look at the docs to see a few more things you can do with timelines. Alright, I'll search for timeline in the docs and look at a few examples. So here it shows you the downside exactly like I've showed

and look at a few examples. So here it shows you the downside exactly like I've showed you of, uh, sequencing and animation and exactly like I was saying, uh, you can have display pose buttons, but you can also, if I manage to grab it, uh, have a range slider or a scrubbing mechanism that shows, uh, how to sequence these timelines. And by default, the uh, timeline items will stack, uh,

to sequence these timelines. And by default, the uh, timeline items will stack, uh, and start one after another. But you have this way to relatively offset sequencing as you see fit. You can see that the third parameter is the position parameter on the timeline. So here, X 100 will happen three seconds from the start of the entire timeline, but you can also have relative values like plus one

of the entire timeline, but you can also have relative values like plus one or minus one and even have some labels. So that's pretty cool. You can give, uh, a label to a timeline, uh, basically like a class to an element and then make this relative to that, including, uh, relative offsets from that label. There really is a lot of flexibility as you can see here. So timelines are like the bedrock of sequencing complex animations instead of trying

So timelines are like the bedrock of sequencing complex animations instead of trying to synchronize everything by hand. Uh, GSAP is super powerful for that, but I think as we'll see in the next video that the real power and mind blowing capabilities of G SAP lie in its plugin ecosystem.