00:00:01 Now, before we dive into the build, I want to make sure you have a solid foundation.

00:00:06 I've prepared a fast-paced, hands-on GSAP crash course to get you up to speed with everything you need to know and to show you just how intuitive and powerful

00:00:18 this library really is.

00:00:19 So, in the next few minutes, you'll learn how to animate elements using GSAP from, to, and from to methods.

00:00:28 how to control your animations with scroll trigger, how to stagger animations for maximum visual impact, how to animate text like a pro using Split Text plugin,

00:00:39 and how to sequence animations one after another with G-Sub Timeline.

00:00:45 Think of this as your GSAP toolbox.

00:00:48 Once you've got this down, building real-world, jaw-dropping experiences will become so much easier.

00:00:55 Let's jump in.

00:00:56 I prepared a quick workshop for you, and I've linked it for you in the description.

00:01:00 Download it, open it within your Visual Studio Code, and then we can install all the necessary dependencies by running npm install.

00:01:09 This is gonna take just a moment as we don't have too many dependencies, As a matter of fact, we can look into what we do have and you'll notice that it's

00:01:17 basically just React, React DOM and React Router DOM with some Tailwind CSS.

00:01:22 So the entire setup is completely empty.

00:01:25 We'll explore everything from scratch.

00:01:27 So let's go ahead and run the application by running npm run dev to see what we have on it.

00:01:33 and then we can hold the command key and click on this link to open it up.

00:01:37 As you can see, I prepared seven different demos that teach you seven most important GSEP concepts.

00:01:43 So, let's dive into the first one by clicking right here, and let's explore GSEP.to.

00:01:50 GSEP.to method is used to animate elements from their current state to a new state.

00:01:56 It's similar to GSEP.from, But the difference is that the GSEP2 method animates elements from their current state to a new state,

00:02:04 while GSEPFROM animates elements from a new state to their current state.

00:02:09 And of course, you can read more about it if you head over to the documentation page.

00:02:13 Basically, you can see how it works right here.

00:02:16 You target a specific element by providing the identifier, and then you specify the properties that you want this element to take after the animation runs.

00:02:25 So we are changing the rotation and the X position throughout the duration of one second.

00:02:30 So now you've seen the demo, right?

00:02:32 You could have done on your own without me, but see this box right here.

00:02:36 Now, we'll animate it together to solidify what we just learned.

00:02:41 So, going back to the code, we can split our terminal and install a new package by running npm install gsap as well as add gsap forward slash react.

00:02:52 which will allow us to start adding those animations.

00:02:55 Once that is done, we can head over to our pages and then GSAP2, as that is the first element we want to animate.

00:03:03 In this case, I want you to animate the box that we have right here below.

00:03:07 So if you scroll down, you can see a div that has a class name of VWHW and then BGBLU500, which makes that a box.

00:03:17 And here we have an ID of blue box.

00:03:20 So let me teach you how to animate using GSAP in React.

00:03:25 Right below this TODO, we can say use GSAP coming from GSAP React.

00:03:32 This is a special hook which looks and behaves a lot like useEffect.

00:03:37 Essentially, you define a callback function and then a dependency array on when this has to run.

00:03:43 And within it, you can use GSAP to then animate the elements you want.

00:03:47 So we do that by saying gsap, which you have to import from the original gsap package, .to, and then the first parameter to the .to method is the target

00:03:58 you want to animate.

00:03:59 In this case, we can target it by ID by saying blue box.

00:04:05 Then the second parameter are variables which you want to animate.

00:04:09 So you can expand an object and let's do something like x is 250 pixels.

00:04:16 So we animate from X of 0, of course, by default, to X is 250. So now if you go back to your page and reload, you can see how nicely this animates.

00:04:27 And just so we can see our animation happening in real time at all times without needing to reload the page, we can add a repeat of minus 1, as well as

00:04:36 a yoyo property set to true, which will make the animation reverse on every other cycle.

00:04:42 So as you can see, now it's going back and forth.

00:04:45 Let's pull this to the side so we can continue animating while we're writing the code at the same time.

00:04:50 There we go.

00:04:51 That's much better.

00:04:53 Now, let's also give it a bit of a rotation property of 360. And you can see now it completely rotate.

00:05:01 And you can see now it completely rotates.

00:05:03 We can also increase the duration to something like two seconds.

00:05:08 If you do that, it's going to move much slower.

00:05:11 And we can also give it a special ease property, which defines how the animation happens.

00:05:16 As you can see immediately, you get a lot of different properties you can choose from.

00:05:20 For example, bounce in.

00:05:22 If you save it, you can see now it kind of bounces in and then stops.

00:05:26 You also have bounce out, which is going to make it bounce at the end.

00:05:30 There's a lot of these different easing curves that you can decide to use.

00:05:34 There's also circle, back, and so much more.

00:05:37 In this case, let's use elastic.

00:05:40 As you can see, it looks like it's on a spring right now, which you have to pull and then move back and forth, which gives it a very interesting effect.

00:05:48 But with this in mind, you just learned how to use one of the fundamental methods in GSAP, which is gsap.to property, which accepts an ID,

00:05:58 which is an identifier, and then properties you want to apply to the element you're targeting.

00:06:03 you also learned how to apply animations using the useGSAP hook and GSAP within React.

00:06:10 So with that in mind, let's go back to the homepage and navigate to the second method of the day, GSAPFrom.

00:06:17 As the name suggests, GSAPFrom is used to animate elements from a new state to their current state, similar to GSAP2, But the difference is that the from

00:06:28 animates from the new to the current, while gsub2 animates from their current to a new state.

00:06:33 Of course, you can find more information within the docs, but for now, let's implement it in action.

00:06:39 I'm going to go back to gsub.to and copy this entire part.

00:06:45 Then, I'm going to navigate to gsapFrom and simply paste it right here below.

00:06:51 Of course, not forgetting to import the use gsap as well as gsap.

00:06:57 Now, if we modify the method from to toFrom and modify the ID from blue to green, and save, you can see that it started moving from the back and then going

00:07:09 to the front.

00:07:10 In this case, let's explore a bit of a different ease, one I like to use often, which is power1.inout.

00:07:17 This one starts with a lot of power and then slows down, as you can see it right here.

00:07:22 But the most important thing is that now it starts from the position 250 pixels in.

00:07:28 If I reload, see how it started from the right side moving to the left.

00:07:32 That is the only difference between from and to.

00:07:36 The next method of the day is gsapFromTo, which, as the name suggests, is used to animate elements from a new state to a new state.

00:07:46 Similar to from and to methods, but the difference is that here, you can define both states.

00:07:52 So if we scroll down, we can copy the entire thing we have here, and navigate to FromTo.

00:07:58 So, let's paste what we copied, import the hook as well as GSAP.

00:08:04 We can modify the method fromFrom to FromTo, and you still pass a specific identifier, but this time you have two different objects you can modify.

00:08:15 We have the first object, which is the From object, and then we have the To object, which accounts for the two properties we want to implement.

00:08:24 So let's try to animate it from an X of 0 and a rotation of 0 with something like a border radius of 0% as well.

00:08:34 And we're going to animate it to 250, repeat minus 1, and let's also add a border radius of 100%. And we can also modify the ease to something like bounce

00:08:50 out to explore another one.

00:08:52 Now, if we modify the identifier from green box to red box and save it.

00:08:58 Now you can see how it turns from a square into a circle and then comes back.

00:09:03 So we're modifying the rotation and the X and the border radius to zero at the start.

00:09:08 And then at the end, we set it to a hundred, which essentially makes it a circle.

00:09:13 This is pretty useful when you want to modify both the start and the end of an animation.

00:09:18 With that in mind, those have been the three base GSAP methods, but let's explore what else we have in store.

00:09:26 Next one on the list is the GSAP timeline.

00:09:29 And the gsub timeline is used to create a timeline instance that can be used to manage multiple animations.

00:09:36 Again, it's similar to to, from, and from to, but it is used to manage multiple animations while all of these manage just one element from their current

00:09:48 state to a new state.

00:09:49 Of course, we can open up the docs to learn a bit more about it.

00:09:52 And in this case, you can see that they consider it a sequencing tool that acts as a container for the other animations we have explored.

00:10:01 It allows you to have complete control and manage the timing of an animation.

00:10:05 So instead of doing something like this, first do X 100, then do Y 50, and then change the opacity to zero, you can create a timeline,

00:10:15 and then you can modify the elements to move on that timeline.

00:10:19 You can also control the whole thing easily by pausing it, resuming it, reversing it, and so much more.

00:10:26 So with that said, let's animate this yellow box and also include the play and pause button.

00:10:32 So we can navigate over to GSAP timeline.

00:10:37 And you can see at the bottom, as we always do, there is a div that has an ID of yellow box.

00:10:43 So first things first, when creating a timeline, we have to define it by saying const timeline.

00:10:49 is equal to gsap, which you have to import from gsap.timeline.

00:10:55 And then you call it like this.

00:10:57 Next, you can also pass the options object to give it some properties, like repeat minus one, repeat delay of something like one second,

00:11:07 and yo-yo to true.

00:11:09 We already learned what this does.

00:11:11 It simply makes the box move left and right.

00:11:13 It simply makes the animation repeat so we don't have to reload the page to check out the animation.

00:11:18 Now that we have the timeline defined, we can use the same use gsep hook we have used not that long ago, define the callback function,

00:11:27 as well as the dependency array.

00:11:29 Now within it, we can use the timeline.to property instead of using the gsep.to property.

00:11:37 and it works in the same way you have seen it before.

00:11:40 It's just timeline.2, you then define the identifier, which in this case is the yellow box, and the second parameter are the variables you pass to it,

00:11:50 such as the X is 250, rotation is 360, border radius is 100%, Duration is two and then ease is back dot and out.

00:12:06 Again, this doesn't matter too much right now, but we're just playing with a way that the animation actually executes.

00:12:12 So if we save it now, you can see how it goes from one end to another and comes back.

00:12:18 Now, what we can do is we can also say timeline.

00:12:24 Again, target the same yellow box, and then provide another set of variables we want to apply to this animation, such as X 500, scale of 1, rotation of 360,

00:12:39 border radius of something like 8 pixels, duration of 2, and ease of 3. back dot in out.

00:12:47 Now, if I save this, you can notice that it's yellow, and then it goes further out of the screen.

00:12:53 I'm going to zoom this out a bit so you can see the full animation.

00:12:57 First, it goes to 250, waits a bit, and moves to the end, and then it returns.

00:13:02 Now, this is a bit similar to using the From and To, or the From To, but what this allows us to do is to add additional animations in the middle.

00:13:12 So we can say Timeline.To, once again, where we target the yellow blocks.

00:13:17 And this time we can, for example, do the Y of 250, scale of 2, rotation of 360, border radius of about 100%, and duration of 2, as well as the ease back

00:13:36 dot in out.

00:13:37 Now, if we save this, we have added a third animation to the mix, where now it will actually go down out of the screen, move back,

00:13:47 and then it's going to come back again.

00:13:49 So these animations are happening in a row, one after another, which gives you a lot of possibilities to control the entire timeline.

00:13:57 Now, another thing you can do here is, of course, play and pause it because you have complete control over the timeline.

00:14:04 So let's head over to our play and pause button, which is right here, and let's expand this on click functionality.

00:14:13 We can define an if statement and say if timeline.paused.

00:14:18 is true, then we want to trigger the timeline.play.

00:14:23 And also else, vice versa.

00:14:26 Then we want to run the timeline.pause.

00:14:29 So if we do this and save, now you can click play pause and completely pause the execution of the animation.

00:14:37 Then you can trigger it again and it works.

00:14:40 So I think you can see the benefits of running animations within a timeline.

00:14:45 You have more control.

00:14:47 Now, let's move over to the fifth method in the GSAP repertoire.

00:14:51 Stagger.

00:14:52 GSAP Stagger is a feature that allows you to apply animations with a staggered delay to a group of elements.

00:14:59 By using the Stagger feature, you can specify the amount of time to stagger the animations between each element, as well as customizing the easing and

00:15:07 the duration of each individual animation.

00:15:10 This enables you to create dynamic and visually appealing effects such as staggered fades, rotations, movements, and more.

00:15:17 And of course, you can find more within G-Sub Stagger documentation.

00:15:21 They even prepared a little video.

00:15:23 But in essence, it is as easy as using the Stagger property.

00:15:26 So let's explore it in action by navigating over to the Stagger file.

00:15:31 In this case, if you scroll down, you'll notice that we don't have a single box with an ID of box.

00:15:38 Rather, we have multiple divs that all have the same class name, stagger box.

00:15:44 So instead of simply using an ID, we'll use the class name as an identifier.

00:15:49 So same thing goes, we can use the use gsap hook, create a callback function, And then we can use the gsap.to method.

00:16:01 And in this case, we can import gsap from gsap.

00:16:04 Now, you might say, hey, we already learned to, but we haven't used stagger.

00:16:09 Well, stagger is just a property you can apply to any animation.

00:16:13 So we'll use to to show this out.

00:16:16 to explain the stagger by targeting the dot stagger dash box, and then we can provide the options.

00:16:23 In this case, we can do the same thing we've done before, such as y of 250, rotation of 360, border radius of 100% to turn it into a circle.

00:16:30 We can add a repeat of minus one.

00:16:39 as well as a yoyo of True.

00:16:41 Now, if we save this, you can see they all follow the same animation as we're targeting all of the elements simultaneously.

00:16:49 But what if we want them to animate one by one?

00:16:52 Well, in that case, we can provide a stagger property of 0.5, let's say.

00:16:59 So now, we can save it, and you can see that now, after half a second, each one of this animates, one after another.

00:17:07 But it doesn't end there.

00:17:09 We can also apply more complex stagger properties by defining stagger as an object.

00:17:16 Here, you can provide the amount, which is the amount of time to stagger the animations between each element, and we can say something like 1.5. Then,

00:17:24 you also have access to something known as a grid.

00:17:27 Grid selects the number of columns and rows in a grid, so you can say something like 2, 1. Then, there's also the axis, and you can choose the axis along

00:17:37 which to stagger the animations.

00:17:39 In this case, we can say y, but you could also say x, in which case they all happen at the same time.

00:17:46 Next, you can also apply the ease, which in this case, we can do something interesting like circ.inout.

00:17:53 And now kind of they happen in a circle.

00:17:56 And finally, this is the most interesting one.

00:17:58 You can define the from, which is the starting position of the staggered animation.

00:18:03 So instead of starting from the start or the end, we can say center.

00:18:07 So this will make it start from the central staggered box.

00:18:11 As you can see, now it happens from the start and moves until the end.

00:18:16 And you can also see how they're doing two and then one and so much more.

00:18:19 So you have complete control over how you want to stagger your elements.

00:18:23 This is great.

00:18:26 So now you know how stagger works and how you can use it when you have multiple elements which you want to animate.

00:18:32 And let's call it a dance of sorts.

00:18:34 The next feature on our list is the scroll trigger, which is used to trigger animations based on the scroll position.

00:18:41 So as you scroll, you can animate specific things once you reach a specific point in time.

00:18:46 So for example, scroll down to see the animation, and then only after you reach a specific point, we want the animation to start.

00:18:53 So let's first open up the documentation page, and I always advise you to read the docs for anything you're doing.

00:18:59 There's also a quick video right here.

00:19:01 And the simplest way is to attach a specific target which when it enters the viewport or the screen, then the animation happens.

00:19:10 Or you, of course, have much more control over when the animation triggers.

00:19:15 In this case, we can go back and go to gsap scroll trigger, and let me show you how to implement it.

00:19:22 First of all, it's very important to note that gsap scroll trigger is a plugin, which means that we have to initiate it at the top by saying import,

00:19:32 scroll trigger, from GSAP all, and then you can do GSAP, which we have to import from GSAP, dot register plugin, and then you pass that scroll trigger.

00:19:46 This will make it work.

00:19:48 Next, with triggers, you also have to define a ref, a reference.

00:19:53 So we can say scroll ref, is equal to use ref coming from react.

00:19:59 This is not GSAP related.

00:20:01 This is just react.

00:20:03 Then we can use the same old use GSAP hook coming from GSAP react, which we can define like we have done so far.

00:20:11 Now, in this case, if you scroll down, you'll be able to see that we have some boxes right here.

00:20:17 Now, if you scroll down, let's attach that ref to our boxes.

00:20:21 So if we scroll here, you can see that we have two boxes, the scroll pink and scroll orange, and we can attach a ref to this div wrapping both of them

00:20:31 by saying ref is equal to scroll ref like this.

00:20:37 Now we can scroll to the top and we can start animating.

00:20:40 So first let's get access to those boxes by saying const boxes is equal to gsap.utils.toArray And to it, we pass the scrollRef.current.children.

00:20:58 So this is how we can get the children using a ReactRef.

00:21:02 Next, we can also run the boxes.foreach.

00:21:07 So for each box, We want to do something, and that something will be a simple gsap.to animation, where we target each individual box,

00:21:18 and for each one, we apply some specific properties.

00:21:21 In this case, we can say X is something like 150. Rotation is 360. Border radius is something like 100%. Scale is 1.5. We have learned that already,

00:21:38 right?

00:21:39 So now if we scroll down, you can see that they basically already turned into circles even though we didn't see it at all because we were at the top when

00:21:47 the animation was happening.

00:21:49 Not too useful, right?

00:21:50 Typically, you want to have some animations when you scroll up to a specific point.

00:21:55 Like if we're here, we can see it, sure, but the user will come from top and then we'll start viewing this at the bottom.

00:22:01 So this is where scroll trigger animations come in.

00:22:05 To this GSAP2 property, we can apply a scroll trigger, which is an object to which you can pass a trigger, and then this one will be a box.

00:22:17 So once specific box comes into view, we want to start the animation.

00:22:21 Let's see that once again.

00:22:23 If I start scrolling down, already it's a circle, but that's because we're missing something important.

00:22:29 We're missing the start of the animation.

00:22:31 which we can define as bottom, bottom.

00:22:35 So when the bottom of the box hit the bottom of the viewport, then it will animate.

00:22:39 And we can also define when it will end.

00:22:41 And it will end when the top of the box hits 20% of the viewport.

00:22:47 We also have something called scrub, which we can set to true, which makes the animation smooth.

00:22:53 And below the scroll trigger, we can also define the ease of power1.inout.

00:23:00 And the reason why the scroll trigger animations are not working is because I misspelled it as scroll instead of scroll with a double L.

00:23:07 So if we fix this, now check this out.

00:23:10 I'm gonna scroll to the top, reload the page, and start scrolling down.

00:23:15 So now, as we enter the viewport slowly, you'll see how this starts as a box because that's what it styles, say by default,

00:23:23 and then slowly, it starts moving to the right, and it starts applying the rotation, border radius, and scale as we scroll.

00:23:32 Check this out.

00:23:36 Interesting, right?

00:23:37 And also, it goes back immediately.

00:23:40 Now, another thing is that since we're mapping over those boxes, we can apply a bit of math to each one.

00:23:47 So instead of just moving it x150 for each one, we can multiply that by boxes.index of a specific box.

00:23:56 So this will already...

00:23:58 apply it a bit differently, because the second one has an index of 1. And we can also give it some default value, like plus 5. So now,

00:24:06 if we start scrolling down, you can see how nicely they animate and exit out of the screen.

00:24:11 We come back, they are back.

00:24:13 And of course, you can keep playing with these value, like top 30%, which will make them go away much sooner, or something like top 10%, which will make

00:24:23 them in the screen for a longer period of time.

00:24:25 It's up to you to start playing with this.

00:24:27 And I just noticed we don't need a comma right here.

00:24:30 It's just bottom bottom.

00:24:31 So like this, yeah, that's great.

00:24:34 Another thing you can add when you're animating using the scroll trigger is if you go all the way to where you end the use G sub function,

00:24:42 which is here, you can also provide a second parameter of scope is scroll ref.

00:24:50 like this.

00:24:51 That way, it will know exactly when the animation has to happen.

00:24:55 So now I'm sure you have already noticed how useful GSEP is, specifically simple properties like GSEP2, staggering, and so on,

00:25:03 but only when you pair it with scroll triggers, which will do a lot within this video, And it's also covered in a lot of depth within our Ultimate Guide,

00:25:11 which you can find in the description down below, completely for free.

00:25:15 You notice how it all starts coming together when you combine all of these properties.

00:25:19 And finally, we have GSAP Text, where I'm going to teach you how to animate text elements with GSAP.

00:25:26 So to animate text, you can use all the methods we have explored so far.

00:25:30 The only thing you have to do is integrate the text plugin.

00:25:34 You can see it in the docs.

00:25:36 Basically, you can add the gsub2 and then add the text you want to animate.

00:25:41 You also have some special properties for animating text elements.

00:25:44 So let's head over to text, and you can see an H1 here that says GSAP text, but it's nowhere to be found on the screen.

00:25:52 It's kind of like it's being hidden, right?

00:25:54 And that's because it is.

00:25:56 At the start, the opacity is zero.

00:25:58 So let's go ahead and animate it in.

00:26:01 We're going to use the same old tips and tricks like use GSAP coming from GSAP React, where we have our callback function.

00:26:10 Then we will define gsap.to, which we have to import from gsap.

00:26:16 We target the text element by ID of text, and then we provide some properties like ease, which will be power1.inout.

00:26:26 Once again, you can go without this or you can find the ones that you like and then add different eases.

00:26:32 And then I'm going to add opacity of one as well as Y of zero.

00:26:37 So this is nothing new, right?

00:26:39 We're just changing some properties using GSAP too.

00:26:42 And you can see how nicely it slides in.

00:26:45 Great.

00:26:46 Now, let me also teach you how to animate the paragraph.

00:26:50 You can see this paragraph class name right here.

00:26:52 It combines all of these properties that you can see.

00:26:55 So let's add a GSAP dot from two in this case.

00:27:00 And we can target the dot para, which is the paragraph.

00:27:05 And then, as you know, with from2, you have to define two different objects.

00:27:09 And at the start, this text is visible.

00:27:11 We didn't apply an opacity zero like we did here.

00:27:15 So you can apply it here in from.

00:27:17 Opacity zero, y of 20. And then, of course, it's going to break until you provide a second object where you can reset the opacity to one and y to zero.

00:27:28 So now you can see how nicely it fades in.

00:27:31 We can also apply other things we learned, such as the delay between the elements, as well as the stagger of 0.1. So now,

00:27:41 different paragraph elements are going to animate one after another.

00:27:45 And with that, we came to the end of this little GSAP workshop.

00:27:49 All right, you just flew through the fundamentals of GSAP and saw firsthand how quickly you can make things on your site move.

00:27:57 And we're just getting started.

00:27:59 Now it's time to put your skills to the test by building a real project from scratch.

00:28:05 A visually stunning landing page for a brand called Mojito Cocktails.

00:28:10 We're talking scroll-triggered animations, immersive parallax effects, and elegant transitions that'll have your site looking like it belongs on awards.

00:28:21 And if you want to go even further, I've got you covered.

00:28:24 Inside my ultimate GSAP course, we'll build four additional sections loaded with even more animations.

00:28:31 You can watch the whole thing on jsmastery.com with interactive live demos for hands-on experimentation, bite-sized challenges to reinforce key concepts,

00:28:41 quizzes designed to lock in your learning, step-by-step Git commits to track your progress clearly, and deep dives later on.

00:28:49 So first, you build this entire cocktail website to get you going with GSEP.

00:28:54 But then we take a step back and dive under the hood of how GSEP works and how you can become a top 1% GSEP developer.

00:29:03 The link is in the description.

00:29:04 But if you want a taste, let's bring this project to life first, starting with setting up the app.