00:00:00 Welcome to the part that most online courses get wrong, the actual workflow.
00:00:07 This isn't a theory course.
00:00:10 This is an animation production workshop.
00:00:13 You're not here to memorize GSAP.
00:00:16 You're here to apply animations only where it makes sense.
00:00:20 You can spend days about reading docs, about easings, timelines, and scroll triggers.
00:00:26 But until you actually see something, snap, glide, bounce, or overshoot on your own screen, It just won't click.
00:00:35 That's why I structured this course as project-based lessons, hands-on challenges, code-along demos, and the real-world case studies.
00:00:45 So let's set up our workflow.
00:00:47 I took the time to repair a full starter repository.
00:00:50 But don't get confused.
00:00:52 These aren't the starter files of a project you're about to build.
00:00:56 This is a mini-app on its own that we'll use throughout the entirety of this course, where you'll be able to revisit some of the animations you learn,
00:01:06 as well as challenge yourself to build on top of them.
00:01:08 For example, very soon we'll dive into the gsep.fromTo method, and here you'll get a complete lesson that only talks about that method,
00:01:18 pointing you to the docs if you need to, and then showing you an animation that we're going to develop within the code that specifically focuses on teaching
00:01:27 you the benefits of that method.
00:01:29 Pretty cool, right?
00:01:30 And there's much more to come.
00:01:32 So let's go ahead and set it up together.
00:01:34 Click the link down below this lesson to get access to the starter, and then head over to the code button and copy this link.
00:01:41 Then, make sure that you have Git installed, if you don't already have it, by Googling Git, heading over to Downloads, and then just download it for your
00:01:49 own operating system.
00:01:50 Oh, and alongside Git, you'll also need Node.
00:01:53 Node will allow us to run our JavaScript and to spin up our projects within which we'll run the animations.
00:01:59 So, just download the latest long-term support version.
00:02:03 By downloading it, you'll also get access to MPM, which is Node's version manager.
00:02:08 Once you do that, head over into your code editor or IDE.
00:02:12 I'll assume that you already have that one, but if you don't, you can download anything you prefer, like Visual Studio Code,
00:02:18 Cursor, or WebStorm.
00:02:20 Then navigate to a folder where you have all of your repos, and type git clone, and then paste the link you just copied.
00:02:27 If you press enter, and if you have successfully set up Git on your device, that should clone it right here.
00:02:33 To make sure that the file is actually there, just type ls, which means list, and then cd into the ultimate gsub starter,
00:02:41 which means that you will now be within that repository.
00:02:44 And now we'll have to open it up right here within our IDE.
00:02:48 So either just drag and drop it or click open folder, and then just find it within your file system, select it and open it.
00:02:56 And here we are.
00:02:57 You'll notice that we have a lot of different files and folders right here.
00:03:00 So let me quickly explain them.
00:03:02 We have a Vite config, because we'll use Vite as our build tool of choice to run the application.
00:03:07 Some styles, a readme, package.json, which has access to all of the different dependencies.
00:03:13 But for now, it's nothing other than Tailwind.
00:03:16 Later on, we'll install some additional packages.
00:03:18 Then there's the index.html, which contains all of the pages that we will run later on, public for the assets, but most importantly,
00:03:27 the pages folder.
00:03:28 Within pages is where we will structure all of your learnings, one by one.
00:03:34 So obviously, we're starting from 01A, which is your first animation.
00:03:38 In here, we have three files, an index.html, which contains the actual page, and here, we're attaching our stylesheet for the styles,
00:03:47 as well as at the bottom, we are referring to our script within which we will run our animations.
00:03:53 You don't have to worry about CSS or index.html in this case.
00:03:57 The file that you need to worry about the most is the script.
00:04:01 And as you can tell, this is the only one that I have left completely empty because here is where you'll learn how to animate different elements on the screen.
00:04:10 Okay, so if we have these three files in 0.1a, which other files do we have in other folders?
00:04:16 Well, take a look.
00:04:17 They're all the same.
00:04:19 So we'll follow the same structure, the same workflow, right?
00:04:23 But then the only thing that changes is what you're learning.
00:04:26 With each new module, learnings are going to get more and more difficult, and you will become that much more proficient as a creative developer.
00:04:34 So how do we actually run this application?
00:04:37 We'll open up your terminal and then type npm install.
00:04:41 This will install all of the dependencies needed for our app to run.
00:04:45 And then run npm run dev, which will spin up our application on localhost 5173. After that, you can just follow this link.
00:04:54 Once you open it, it'll look something like this.
00:04:57 Think of this as your own animations playground.
00:05:00 This is where you'll be learning about and implementing all of those animations.
00:05:04 So if we head over into the first one, you'll notice that right now there is just one square right here.
00:05:11 And that square obviously isn't moving, right?
00:05:15 So our job will be to animate whatever is being shown right here on the screen.
00:05:20 For example, we have this tooltip or a pop-up And popup has to, well, pop up, right?
00:05:26 So I think it's pretty clear how this is going to work, right?
00:05:29 In every one of these lessons, I will first teach you how a specific GSAP method works, and then we'll implement it on an example.
00:05:39 And at the end of the day, you'll have all of these examples to test, learn from, and recap.
00:05:45 This entire course is built around the rapid iteration.
00:05:49 Try every snippet, change durations, swap easing curves, modify scales and rotations just to make it feel alive.
00:05:59 This is how you develop animation taste, the thing that most developers never acquire.
00:06:06 So I can't stress this enough.
00:06:08 Break things, get weird behaviors, see unexpected snapping.
00:06:13 That's good, because that's where 90% of your learning happens.
00:06:18 It might feel tough, but by the end of this course, you won't just know GSAP.
00:06:24 you'll be building agency-level production work most developers only admire from a distance.
00:06:29 So let's jump right into your first G-SAP animation.
00:06:34 The real work starts now.
