00:00:00 Now that you understand the properties, let's understand the methods, because one doesn't work without the other.

00:00:06 You can call methods like starting, pausing, reversing, killing, or sequencing animations.

00:00:11 They'll give you the power over timing, flow, and interactivity.

00:00:16 So, under Understanding Methods, let's take a look at the HTML file, and you'll notice that right here, we have a simple box alongside some controls.

00:00:26 And if you head over into style.css, you'll notice that we're just applying some simple styles to this 3x3 box.

00:00:33 For now, let's change the opacity from 1 to 0 so that the box disappears.

00:00:39 And now we can jump right into the script part where we'll apply and learn about all of these methods.

00:00:45 Import gsap from gsap.

00:00:49 And let's first set up our animation.

00:00:52 By saying gsab.to, we'll target the .box element, and then apply some properties.

00:00:59 Let's change the opacity back to 1, maybe apply a bit of rotation of 360, a border radius, of about 50%, a scale of 1.25, and iteration of about two seconds.

00:01:16 So now we have a box that over two seconds turns into a circle.

00:01:20 Now, in order to be able to test all of these different methods, we have to target all of these different buttons that will then trigger them.

00:01:28 So we have to type out all of these query selectors and event listeners, which will end up looking something like this.

00:01:36 This is simply targeting all the buttons by their class names.

00:01:39 I'll most likely leave this block of code down below so you can just copy it.

00:01:43 And the same thing goes for these event listeners.

00:01:46 The only thing we're doing here is targeting the element and adding a click event listener, which will then allow us to apply some GSEP logic right within it.

00:01:56 This has nothing to do with animations, but we just have to make it happen in order to be able to visualize it all.

00:02:03 And now, let's start exploring all of these different GSAP methods.

00:02:07 The first one on the list will be the play method.

00:02:11 And you can use a play on a specific animation.

00:02:14 But never before, actually, we have stored an animation in a variable so that we can execute some methods on it.

00:02:22 So this is the first time that we'll do it.

00:02:24 You can not only run a specific animation once, you can also store it to a variable just like you would with a regular JavaScript object by saying const

00:02:35 animation is equal to, and then you attach it to this gsub.to function.

00:02:40 Pretty cool, right?

00:02:41 And now we can use that animation within these functions by saying animation.play.

00:02:49 And you can immediately see from GSAP's IntelliSense how it works.

00:02:53 It plays the animation optionally from the given start time.

00:02:57 So you can just say animation.play and set the true to start playing it, or you can just play it from the 1.5 second mark.

00:03:06 But keep in mind that when you reload the screen, we start the animation immediately, so it already finishes.

00:03:12 So using play, we cannot replay it from the start.

00:03:15 We can just start playing it from the start or from the pause position.

00:03:19 But now the animation has actually ended, so there is nothing more to play.

00:03:24 So to be able to visualize this better, let's also implement the pause.

00:03:29 It's super simple.

00:03:30 You just say animation.pause.

00:03:33 And now if you reload and if you're quick enough, you can pause the animation at a specific point in time.

00:03:40 Or play it.

00:03:41 So now we can play with those two in order to see all the little bits of that animation.

00:03:47 Once again, you can pause it, play it, pause it, play it.

00:03:51 Pretty cool, right?

00:03:53 The pause method will just freeze the animation where it is and the play will continue it.

00:03:58 And a method very similar to play is resume, which will basically just continue a paused animation in the direction it was headed,

00:04:06 either forwards or backwards.

00:04:09 You can use it similarly to using play.

00:04:11 You can just resume and pause it.

00:04:13 But now in order to be able to play it again, we have to restart the entire animation.

00:04:19 So let's just add the animation.

00:04:25 And now, once it finishes, we don't have to be fast enough anymore.

00:04:29 We can just restart it from scratch.

00:04:31 The restart method brings the animation back to the start and plays it again from zero.

00:04:38 The next one is interesting, and it is the reverse.

00:04:41 So you can also run the animation.reverse, which I think you can already assume what it'll do.

00:04:48 When the animation is finished, you can actually reverse its play.

00:04:52 So, it'll turn back from the circle into a square, but then very quickly, it'll go away into oblivion because the start position is an opacity of zero.

00:05:04 And now we can play it once again and reverse it.

00:05:09 Of course, at any point in time, you can then pause it.

00:05:13 So if I play it and pause it, I can start reversing from there and then once again pause it.

00:05:20 But now take a look at this.

00:05:22 If I click Reverse and Pause, and if I click Play, what do you think will happen?

00:05:27 Well, it'll just go back to the final stage.

00:05:31 But if I start reversing it and then pause, And if I click Resume, it'll actually continue going into the reverse direction,

00:05:39 which makes the difference between the Play and the Resume.

00:05:43 If it didn't yet click, just go ahead and play with these buttons a few more times, and it'll all start making sense.

00:05:49 Finally, there's a very weird one, which is kill.

00:05:53 Yep, you can kill the animation.

00:05:56 So, let's see how it behaves.

00:05:58 I will restart the animation, and then all of a sudden kill it.

00:06:02 It looks like it paused it, but actually what it did is it completely removed the animation.

00:06:07 It stopped it, reset the internal state, and it won't play again unless you recreate it.

00:06:13 So if I now try clicking play, nothing happens, because the animation no longer exists.

00:06:20 I also can't resume it, so those two buttons are now completely dead because killed killed them.

00:06:25 And I even can't restart it because the animation doesn't exist.

00:06:29 There is nothing to restart.

00:06:32 So I would have to completely reload the page in order for all of these to come back.

00:06:38 Then there's the yoyo.

00:06:40 So just say animation.yoyo, which will set the yoyo value of the given animation.

00:06:46 Setting it to true means that each time the animation repeats, it should switch its direction forwards and reverse.

00:06:52 So just set it to true.

00:06:54 And now if you click yoyo, nothing really seems to be happening.

00:06:58 but that's because we have to call it alongside a repeat.

00:07:03 So the last method I want to teach you is the repeat method, which we can get access to by simply saying animation.repeat,

00:07:11 and you can pass in the number of how many times you want to repeat the animation.

00:07:16 In this case, let's do two to tell the animation to run three times total.

00:07:20 Initial plus two repeats.

00:07:23 So if I save it, it'll play once.

00:07:27 And if I click this repeat button at the top right, and then restart the animation, you can see that now it repeats a couple of times.

00:07:35 But now, if I turn on the yoyo, which means that it'll go back and forth, I will also turn on the toRepeat functionality,

00:07:46 and I will then run restart.

00:07:48 What will happen is that the animation will play forward to a circle, then backward into a square, and then we can repeat it a couple of times,

00:07:58 ending up in something that looks like this.

00:08:01 Actually, I could have improved this demo by making the yo-yo and the repeat seem like states, a buttons that when clicked are active.

00:08:09 Because if I click them once, nothing happens, but we have toggled them on.

00:08:14 So from this point onward, the animation will actually yo-yo, right?

00:08:18 So that's just one thing that maybe you can do if you want to play a bit with CSS.

00:08:23 But this lesson was all about teaching you different methods that exist.

00:08:27 So please go ahead and play with them a bit.

00:08:29 Try to combine them, try to reverse it, pause it, resume it, restart it.

00:08:33 Really try to understand what's happening here.

00:08:36 As we dive deeper into the course, you'll see their real use cases.

00:08:40 Great job on completing this lesson.