Let's have some fun with scroll driven animations using G SAP's scroll trigger plugin. Okay, we're going to take our example animation from the previous lesson and expand on it. We're going to use functionality that is not part of gsap core, but it's part of a plugin. So if we go here, we can see the list of all plugins available. And what we want to use is the scroll plugins and scroll trigger.

And what we want to use is the scroll plugins and scroll trigger. So to be able to use a scroll trigger, we are going to have to register the plugin, which means that we also need to install it. And to do that we need to import this specific plugin. So up here where we import gsap, I will also import scroll trigger and like copilot suggests gsap slash scroll trigger. And once I have imported this plugin, I can go ahead

slash scroll trigger. And once I have imported this plugin, I can go ahead and register it with gsap dot register plugin and we wanna register scroll trigger. So by adding this code, nothing is going to change, but we've added the capability to now add scroll triggers to our animations and anything we do with gsap Before we can actually uh, play with scroll animations. We need a little bit more of usage on our viewport because right now our UI literally stops right here.

We need a little bit more of usage on our viewport because right now our UI literally stops right here. If I go in the CSS file, you can see that I have this spacer class commented out, and it's just going to add some silly margin top and bottom, which is going to push that square all the way below so that we can scroll to reveal it. And just to show you the gsap uh, blade file, you can see that our square is wrapped in this spacer div, which is the class that we've just added the starts for.

that our square is wrapped in this spacer div, which is the class that we've just added the starts for. Alright, so if we look at our code right now, we are setting up a timeline and then we are sequencing these three effects. But if I refresh the page and I start scrolling, you can see that the animation hasn't waited for us to arrive there to start. And that's precisely where something like, uh,

to arrive there to start. And that's precisely where something like, uh, scroll trigger is useful because you can decide when a animation should start, uh, based on the scroll position. And typically you wanna run this when the elements here are square enters in the viewport. Uh, so let's play with that because we have a timeline here, we can directly hook the scroll trigger inside the timeline.

because we have a timeline here, we can directly hook the scroll trigger inside the timeline. So if I have an options object, one of the options will be scroll trigger. Indeed. So that's a config object. And the first thing that it'll want to know is what the trigger is. So we want the square to be the trigger basically whenever it enters in view, so we can go trigger that's square.

whenever it enters in view, so we can go trigger that's square. So let's try the code as is. You can see that the animation started now because we are scrolled down. But if I scroll back up and I refresh the page, let's wait a couple of seconds and then scroll down and we should see the animation start. Nope, it's already started and we probably need to add another configuration option.

Nope, it's already started and we probably need to add another configuration option. And it is when to start the animation. So start and check this out here. I'm going to go with top center. And so that might seem confusing, but here the first value top is referring to the trigger. So a square and then center is where on the viewport this should, uh, trigger when the top of the square meets that threshold.

where on the viewport this should, uh, trigger when the top of the square meets that threshold. So let's refresh the page. And here when I scroll, the square should be still on the left. Yep, it is. And when the top of the square reaches the halfway mark, it should start the animation ready? Anytime now. And here we go. Okay. And you know what? The start of the animation is too slow and it's

Anytime now. And here we go. Okay. And you know what? The start of the animation is too slow and it's because we have this duration of three. So let me remove that. There you go. A little bit more snappy. So it's kinda hard to work your head around this top center, uh, positioning thing. But luckily, G SAP's scroll trigger offers a markers option. And if you turn that on, it sort of, uh, shows some debugging lines on the side of the viewport

And if you turn that on, it sort of, uh, shows some debugging lines on the side of the viewport to show you when the trigger is meeting the threshold. Let's try that. So I will add one more option and it's markers and set that to true. And now you can see that we have this scroller start scroller end and start end. So the start and end are referring to the trigger. So they are going to move along with the trigger. And then the scroll start

So they are going to move along with the trigger. And then the scroll start and end are the positioning when, uh, the animation should start. So whenever start meets start is when it begins, and whenever end meets end is when it ends. And the end concept might not make sense just yet, but just you wait, let's add an end, uh, option. So, and, and maybe let's go when the top of the trigger reaches 200 pixels from the top.

So, and, and maybe let's go when the top of the trigger reaches 200 pixels from the top. So now you can see that our scroller end, uh, line has shifted 200 pixels from the top as we've instructed it. But for now, the animation really just runs once, the first time we cross the line. So I should have to go back here and refresh the page to have the square be in its starting position

and refresh the page to have the square be in its starting position and then the animation is going to kick off right as we cross. And from there, uh, nothing happens anymore. But as you probably guessed, uh, there's ways to configure all of that. So we can configure what happens when the element enters the scroll trigger first, when it leaves it, and then when it enters in reverse

what happens when the element enters the scroll trigger first, when it leaves it, and then when it enters in reverse and leaves in reverse. So there's four options where we can change the behavior. If I look at the config object here, the property we are looking for is called toggle actions. So let's scroll down. There's quite a lot. We gotta go until the letter T, right? Almost there, my goodness. There we go. Toggle actions. So it's a string and you can determine all four these

Almost there, my goodness. There we go. Toggle actions. So it's a string and you can determine all four these distinct toggle places on enter on leave on, enter back and on, leave back. The options are play, pose, resume, reset, restart, complete, and so on. So for demo purposes, let's say that we want the animation to go forwards when it enters and then backwards when it leaves. And then on the way back, do the opposite again.

and then backwards when it leaves. And then on the way back, do the opposite again. Go forwards and backwards. So, uh, let me move the markers at the top or maybe the trigger, which is the most important. Then start. And, and here we are going to go toggle actions. The first one is enter. So we want to play the animation on enter leave. When it slides out of here, we want to go reverse. And then I think we want to do the same again, play

When it slides out of here, we want to go reverse. And then I think we want to do the same again, play and reverse so that when we come back down this way, it goes back forward and again, reverse. Let me save that and let's see what happens now. So I'm going to scroll past the start trigger and the animation should go. Yeah. And then if we keep going up past the end, so when the end meets the end right here, it goes backwards. And then when we re-cross it the other way,

so when the end meets the end right here, it goes backwards. And then when we re-cross it the other way, it happens again and again. And I'm curious to see what happens if I scroll fast. Uh, and the animation doesn't have the time to go all the way. I'm pretty sure that the uh, animation is going to be canceled and go backwards as soon as it hits the threshold. That's what I'm expecting from Gsap. So let's give it a try.

as it hits the threshold. That's what I'm expecting from Gsap. So let's give it a try. I'm going to scroll and indeed it cancels. I promise you that. I didn't really know that. I just assumed because it is so well thought and powerful that animation cancellation is a thing. Very cool. Okay, next I want to increase the, uh, surface area here. It's pretty narrow. So just like we end 200 from the top, I wanna start 200 from the bottom.

It's pretty narrow. So just like we end 200 from the top, I wanna start 200 from the bottom. And if I was to go bottom 200, that actually would not work. But what I can do is go minus equals 200. And this is, uh, a syntax to say go 200 from the bottom. So now our trigger hits here and then back there. And by the way, we have start and end, uh, collapse together here. And it's because they both have the top value.

and end, uh, collapse together here. And it's because they both have the top value. If he, I was going bottom, this would be the bottom of the shape and I can go center or I can go 75%. It is very flexible. And so now the exit will be considered only when 75% of the trigger has passed the line. Okay? So as you see, you have a lot of control on when to start, finish

Okay? So as you see, you have a lot of control on when to start, finish and what, uh, operations to do at each of these lifecycle events. But right now we are still triggering an animation that runs freely once you cannot trigger it to start. Another cool thing that you can do is tie the animation progress to the scroll position, and that is super easy to do.

and that is super easy to do.