Another cool thing that you can do is tie the animation progress to the scroll position. And that is super easy to do. All you have to do is add the scrub properly and you can set it to a value. But if you set it to true, it'll stop following a specific duration for each of these animations and instead take the whole timeline and lining up with the scroll position based on the start and end position.

and lining up with the scroll position based on the start and end position. So let's save that. Let's go back here. And you've already seen what happened. If I start scrolling as soon as we enter the start, we are considering the progress starting from zero and going up. So if I go up and down, it is completely tied to the scroll position and it's going to reach a hundred percent

to the scroll position and it's going to reach a hundred percent of the progress right as the end meets the end. And then the same backwards, you've noticed that the toggle actions here are not respected anymore because now we are really tying the animation to the scroll position. So the scrubbing is what, uh, detect determines, sorry, uh, what the animation should do. So if you use scrub true, you don't want to use

what the animation should do. So if you use scrub true, you don't want to use to actions and vice versa. Scrub can also take a numerical value. If I had scrub three here, check out what happens when I cross the threshold. You can see that when I stop scrolling, the animation still operates. And basically what's happening is there is some sort of delay in the animation completion

And basically what's happening is there is some sort of delay in the animation completion compared to the scroll position. So whenever I scroll, the uh, completion of the position progressed position is going to be delayed by three seconds because we've set scrub to three. So think of it as a delay that you apply or lag is really the term. Typically lag is a bad term in terms of uh, programming and ui, but here it's an intentional lag

Typically lag is a bad term in terms of uh, programming and ui, but here it's an intentional lag that creates this kind of smooth, gives some weight to the shape because it kind of takes some time to start and slow with a bit more inertia. So let's me put a crazy value like six. So you really are going to see the effect. Okay, so now I'm going to scroll past the start and stop immediately. And we should have 1, 2, 3, 4, 5, 6.

and stop immediately. And we should have 1, 2, 3, 4, 5, 6. Uh, it was a little bit subtle because this part of the animation is subtle, but if I go here, you can see that the animation is prolonged for another six seconds. Scrub zero might be equivalent to true. So either you have a true false bullion, but if you want more control, you can go any number zero being the equivalent of true, which is,

but if you want more control, you can go any number zero being the equivalent of true, which is, uh, no delay basically. So you can see this is very snappy and as soon as you add uh, some degree of lag, it just adds some interesting motion. It feels a little bit more smooth and fluid. This is what I mean by good kind of lag. Alright, we barely scratching the surface here of what you can do.

Alright, we barely scratching the surface here of what you can do. You can use, uh, scroll trigger with timelines with just, uh, twins, which is gsap, two gsap from, uh, you can really, really use it with basically anything else in the Gsap ecosystem. It's really fantastic and uh, you can achieve a lot, lot, lot of things. I wanna show you one more thing in another video and it's how to achieve a parallax effect

I wanna show you one more thing in another video and it's how to achieve a parallax effect with scroll trigger as well, but also the use of another little add-on plugin. I think you're gonna like this. I'll see you there.