00:00:00 And finally, there's the .set method.

00:00:03 So if we head over to our example where it says learn set, you'll notice that right here we have just one simple GSAP box.

00:00:12 And within the styles, you'll notice that it's nothing more than a simple box that is initially visible.

00:00:18 But now, what if you initially want to have that box off screen, and then you want to animate it from somewhere?

00:00:25 Like, let's say that your styles put it here initially, but you want it to start from the right side, or from the top, or from the bottom.

00:00:34 You have to somehow prepare it for the animation that's about to happen.

00:00:38 And for that, we use the .set method.

00:00:41 So first, import gsap from gsap.

00:00:46 And then, let's immediately set the box to an off-screen state without the animation by saying gsap.set.

00:00:54 Target the .gsap box.

00:00:57 and then give it the opacity of 0, a scale of 1.5, and maybe a position Y of 100 to get it off the screen.

00:01:07 So this allowed us to both keep the original styles of the box and then also prepare it for the animation that's about to happen.

00:01:16 So now, if you want to animate it into view after a short delay, we can use our get all gsap.to by targeting the gsap box,

00:01:26 giving it a delay of about 0.5 seconds, and then bring it back to visibility with opacity one, scale one, y position of zero,

00:01:37 so it's in the middle, duration of about 0.6 seconds, and an ease of expo.out.

00:01:45 So now if you save it, you'll see that it'll actually pop up from the bottom.

00:01:50 But using set, if you want to actually initially set it to come from the top, you can set the Y position to minus 100. And now notice how it comes from

00:02:00 the top.

00:02:01 Or maybe you want to make it come from the top right.

00:02:06 In that case, you could set the X position also right here, and then it'll be moved into the X position.

00:02:12 But here you can bring back the X to zero.

00:02:15 So it still comes back in the center, but where it's coming from.

00:02:19 So the initial position is going to be from the right.

00:02:22 Of course, if we slow it down a bit, you'll better see what is happening.

00:02:26 And I'll even make the effect a bit more exaggerated by bringing these to 500 and 500 here as well.

00:02:34 So now notice how it's flying in from the top right.

00:02:37 Or maybe it's flying in from the bottom left.

00:02:41 you control where the animation starts from.

00:02:45 In simple words, the .set method is a non-animated version of the .to method.

00:02:51 It instantly applies values to elements, and it is often used to prepare or reset state before running animations.

00:03:01 Think of the dot set method like placing an object on stage before pulling the curtain.

00:03:07 The audience never sees the placement step, only what comes after.

00:03:12 Cool.

00:03:13 So now you know how to prep for your animations as well.

00:03:16 Great work.