00:00:00 See, in the last lesson, we used a script to install GSAP.

00:00:06 And although that script gives us access to all of the GSAP's functionalities, it's missing some IntelliSense that will allow us to autocomplete methods

00:00:15 and properties that GSAP allows.

00:00:18 So, if you head over to this script that we last wrote and hover over GSAP, you can see that it doesn't know what that is.

00:00:25 It says it could be anything.

00:00:27 Same thing for the dot2 method or any of the properties.

00:00:30 Just isn't up to the standard to the modern developer experience that allows us to see and understand what we're writing.

00:00:37 We would have to manually check what each one of these methods does and how to use it within the gsep docs.

00:00:43 Or if you start typing something like gsep dot, it doesn't know that the from method exists even when you type the first three out of four letters.

00:00:51 So this just isn't going to cut it for developer experience.

00:00:55 For that reason, I want to show you how most people install GSAP and how you should do.

00:01:00 And that is by using a package manager, in this case, npm.

00:01:05 So just follow my lead, open up the terminal, open up a new one if you're already running the app in the current one, and just run npm install GSAP.

00:01:16 This will install all of the packages right within our package.json.

00:01:22 So just within your dependencies, you should be able to see a specific version of gsep installed, and it says that it is a framework-agnostic JavaScript framework.

00:01:30 Okay, this is already more than what we had before, but now the key thing is that if you head back over to the script and hover over specific methods,

00:01:39 it's going to know exactly what this method does and which different parameters you have to pass into it to make it work.

00:01:46 And this is super useful.

00:01:49 Not only that, but if you now start typing gsap.from, you can see that now you get all of these different methods that actually exist on the gsap object

00:02:00 or the entire gsap library.

00:02:01 And then you also get the info on how you can use them.

00:02:04 Another benefit of this is that now that we have installed it as a package, you don't have to re-add that script into the index.html file of every single document.

00:02:14 It's installed globally for the entire repo.

00:02:17 Okay, so let's dive into this lesson, which is all about understanding properties, and this is where it's going to be super useful to have this library installed.

00:02:26 Taking a quick look at this index.html file, you can see that we only have one thing here, which is a div with a class name of box.

00:02:34 And within the style.css, we can see that that box is 300 by 300, and it has an opacity of 1 and scale of 0.5. Now, if you run your application using npm

00:02:45 run dev, open the Playground on localhost 5173, and head over into Understanding Properties, you'll see that we have this single 300 by 300 box.

00:02:55 Now, just so we can animate it, let's go ahead and change the opacity from 1 to 0, rendering the box invisible.

00:03:02 Then, open up our script.js, and let's start with the animation.

00:03:06 And since animations are super visual, I want to be able to see the output of our code in real time.

00:03:12 So I put my browsers side by side with my editor, and I would recommend you to do the same.

00:03:16 So let's start first by importing gsap from gsap.

00:03:21 Since we installed it through npm, you need to actually import it in places where you want to use it.

00:03:27 And then we can start like we did the last time.

00:03:29 gsap.

00:03:31 In this case, we're going to use the to method, And you can already see that we first have to pass a class or a specific target that we want to animate.

00:03:41 So in this case, we're going to animate the .box element.

00:03:45 And then we can define different variables that we want to animate.

00:03:49 So I'll open them up within an object.

00:03:52 As before, I'll zoom it in just a bit more so you can see it better.

00:03:56 And first things first, we're going to set the opacity to one so we can actually see the box we're animating.

00:04:02 Oh, by the way, once again, let me know if you'd like me to disable this AI autocomplete.

00:04:07 It might be a bit annoying to constantly pop up as I'm trying to teach you something.

00:04:11 So just let me know down in the comments what you prefer.

00:04:14 For now, I'll go ahead and disable it.

00:04:16 And there you have it.

00:04:17 We now have a visible box.

00:04:20 So what is opacity?

00:04:21 Well, you can think of it as a property that we can modify.

00:04:25 Let's play with something else, like rotation.

00:04:28 You can change the rotation to 360. It is typically calculated in degrees.

00:04:34 So if I save it, you can see that now, as you reload your screen, the box rotates by 360 degrees.

00:04:41 There are also different properties like rotation Y, which rotates it around the Y axis, and the rotation X, which rotates it around the X axis.

00:04:52 But for now, let's just bring it back to rotation.

00:04:55 After that, we can also change properties like the background.

00:04:59 Feel free to choose any hexadecimal value you want.

00:05:02 I'll go with something like FF6, F6, 1, and save it.

00:05:08 And there you have it.

00:05:09 Now you have this orangish box.

00:05:12 You can also change things like the border radius, maybe to something like 50%. which will turn this box into a circle.

00:05:21 Then there's the Scale property, which is all about how big or small your object is.

00:05:27 So let's set it to 1.25. If you do that, over a specific duration, this box will take a different shape.

00:05:36 There's also Scale X and Scale Y, which only modify the size of the object around X or Y axes.

00:05:45 Pretty cool, right?

00:05:46 And then the magical property of Duration, which defines over how many seconds this animation will happen.

00:05:55 So if we set it to 0.01 second, check this out, it happens in a blink of an eye.

00:06:03 But if you increase it to something like five seconds, well, then this box will turn into a large circle over a period of five seconds.

00:06:14 For now, let's leave it at two.

00:06:17 And there are so many more properties that you can animate.

00:06:21 Like change the X position of a specific object.

00:06:24 For example, by 200 pixels.

00:06:27 So now it'll actually move 200 pixels to the right.

00:06:31 Or you could move it 200 pixels to the left by saying minus 200. There's also the Y position.

00:06:40 So if you set Y to 200, it'll move 200 pixels down.

00:06:46 And if you set Y to minus 200, it's going to move it 200 pixels up.

00:06:52 By this point, I think it's safe to assume that you could have noticed that each one of these properties, we can call them GSAT properties,

00:06:59 actually corresponds to a basic CSS property, which means that you can change or animate any kind of CSS property from color,

00:07:10 width, height, border, border color, and more.

00:07:15 Any kind of properties you can think of.

00:07:17 Anything.

00:07:18 Even text animations.

00:07:20 And here's a little challenge for you, which is the only one property right here that is not a CSS property.

00:07:28 Think about it for a second.

00:07:30 It's the duration, because the duration corresponds to the length of the animation in seconds.

00:07:36 There are a couple of other properties that are not CSS-generic, but they are GSAP-specific.

00:07:42 Duration is one of them.

00:07:44 There's also delay, which is the time to wait before the animation starts.

00:07:50 So if we set the delay to 2 seconds and then the duration to 2 seconds, we're going to first have to wait 2 seconds and only then it's going to start animating.

00:07:59 Let me move this Y just so we have a clear circle in the middle.

00:08:03 And let's lower the delay to something like 0.5. There we go, that's better.

00:08:09 There's also something called an ease, and this ease will control how these different properties change over time.

00:08:18 This is super important.

00:08:20 I mean, think about it for a second.

00:08:22 Try to visualize it in your head.

00:08:24 Like, we are changing from a rotation of 0 degrees to 360 degrees over a period of 2 seconds.

00:08:33 But are we going to move from 0 to 360 in half a second and then do nothing else for the latter 1.5 seconds?

00:08:41 Or are we going to do it gradually, millisecond by millisecond, increasing the rotation?

00:08:47 Same thing goes for the opacity and all of the other properties.

00:08:50 There are many different eases that we can choose from.

00:08:53 And since we installed the gsub library, if you start typing in a string, you will immediately get a list of all of the predefined eases that you can use.

00:09:04 Don't worry if this doesn't make too much sense yet.

00:09:06 We're going to have a whole module where you'll be able to visualize all of these eases.

00:09:12 But for now, let's go with something like bounce.

00:09:15 If you save it, you'll see that it'll start very quickly.

00:09:19 It'll actually go beyond these percentages that we have set right here, and then it'll bounce back a bit.

00:09:26 Check it out one more time.

00:09:28 Okay, we go into a circle, then it goes back a bit and then it finally finishes.

00:09:33 This is a pretty cool, but maybe not super useful ease.

00:09:37 It's only useful in specific use cases.

00:09:39 The one that I like to use is power1.inout.

00:09:43 You can see that it actually starts slow and then it speeds up as it goes.

00:09:48 Once again, we'll learn about all of these very soon.

00:09:52 There's another property called Repeat.

00:09:55 So we can set the Repeat to the number of times that we want to repeat the animation.

00:09:59 For example, let's say that we want to repeat it two times.

00:10:02 It's going to do it once, and then it's going to do it another time.

00:10:06 I'll remove the delay, just so it makes a bit more sense, and you can see how it goes.

00:10:11 Now, if we bring back the bounce, As the ease that's going to be very interesting because it's going to keep bouncing for two times.

00:10:21 But what we can do is set the repeat to minus one in case we want it to repeat infinitely.

00:10:27 This is something that you're commonly do for repeated animations.

00:10:31 If I do it.

00:10:32 Okay.

00:10:33 This makes sense.

00:10:35 I don't like how it loses the opacity at one point.

00:10:38 Once it reaches the end of the animation.

00:10:40 So if I want to change it, I can quickly set the initial opacity to one as well.

00:10:46 What it'll do now is it'll just move from a square to a circle like this.

00:10:53 Pretty cool, right?

00:10:54 Okay, but this is a bit too much, so I will remove the repeat for now.

00:10:58 There's also a property called yoyo, and what it does is if it's set to true, it'll reverse the animation on every alternate repeat.

00:11:07 So if we bring back the repeat right now, and maybe we remove the border radius, you'll be able to see that now it moves a bit back,

00:11:16 so it yoyos back in between different animations, having this super cool effect that you would think would take a lot of manual time to implement,

00:11:26 but actually, it just works out seamlessly.

00:11:30 So that is YoYo for you.

00:11:32 For now, of course, I'll comment these ones out.

00:11:34 There's also something known as a repeat delay, which is a delay between each repeat cycle.

00:11:41 So for example, if I set this to two seconds and bring back the YoYo repeat, it's going to do it, wait for two seconds, and then it's going to continue

00:11:50 with repeating the animation.

00:11:53 There's also a property called paused, which if set to true, it'll simply pause all of the animations.

00:11:59 And there's a property called stagger, which applies the offset timing for arrays of targets.

00:12:06 So for example, if we had multiple squares, we could animate one, wait one second, then do the second one, then do the third one.

00:12:15 Of course, I cannot visualize this on a single box, which is exactly why there's gonna be a whole module on staggers later on.

00:12:22 But now I have a challenge for you.

00:12:24 Keep playing with all of these different properties.

00:12:28 Not just GSAP specific ones, but generic CSS ones.

00:12:32 See how things change over time.

00:12:34 Try different eases, scales, backgrounds, just to get a gist of what GSAP is all about.

00:12:41 Only when you experience, you will get to fully understand it.

00:12:44 Great.

00:12:45 This lesson was super fun and let's be honest, a bit simple, but it forms the foundation for what GSAP really is and how it works under the hood.