Let me show you how easy it is to achieve buttery smooth parallax effects with gsap. Okay, so we have a new example for this one. I have these three squares here. You can see the markup. These are the three squares and I have a padded class here that sort of adds some, uh, padding top and bottom just so we can scroll and play with the scroll effects. Now, if I go in the gsap dash parallax TypeScript file, we already have gsap

Now, if I go in the gsap dash parallax TypeScript file, we already have gsap and the scroll trigger plugin, which this effect depends on. And we have registered the scroll trigger plugin like we've done in the previous video. So there's plenty of different ways to achieve parallax effects, but gsap offers us a built-in solution through the form of another plugin called Scroll Smoother. So let's install that plugin and take a look.

of another plugin called Scroll Smoother. So let's install that plugin and take a look. Let's quickly search IND docs. Scroll smoother, and there it is. And so it's a fairly simple plugin and I just wanna make something clear real quick before we start this scroll. Smoother plugin is going to affect how the scrolling behavior happens for the user and alter the default behavior.

how the scrolling behavior happens for the user and alter the default behavior. Typically, this is a big no no, do not do this, uh, in terms of accessibility and usability, but, uh, scroll smoother is a little bit different. It's using the native scroll position, it's not hijacking, uh, the browser's scroll position and then completely transforming it, creating all sorts of accessibility problems. Instead, it's going to listen to this crawl position

of accessibility problems. Instead, it's going to listen to this crawl position and make, uh, intelligent calculations to override the behavior. Uh, you still should use it with moderation because you can do some crazy stuff like making the scroll go horizontally instead of vertically, but used with moderation. You can do really embellished experiences and if you use a Mac

You can do really embellished experiences and if you use a Mac and you have really smooth scrolling with the magic trackpad, you might not realize, but certain browsers and oss have pretty poor staggering scroll uh, mechanisms. And if you use this for these users, they will have this pottery smooth scrolling experience as well. So I'm rambling a lot. Let's take a look at what it can do.

scrolling experience as well. So I'm rambling a lot. Let's take a look at what it can do. Okay, there is a weird, uh, part to this, uh, plugin and that is that it needs a certain setup to work properly. It needs two elements with uh, IDs. You can change them, but if you use the default one, it's gonna work out of the box. So I'm going to copy these two divs and paste them and comment on this. Alright, so back in the markup, uh,

and comment on this. Alright, so back in the markup, uh, on the parent most element after the layout, I'm going to paste a diviv with a smooth wrapper ID and then a diviv with a smooth content id. And I need to make sure I close these two Ds like so. Alright, so nothing is going to change. I can still have the normal scroll. And by the way, what I mean by normal is as soon

I can still have the normal scroll. And by the way, what I mean by normal is as soon as I stop scrolling, you can see that it stops. And if I use the elevator bar here, same deal. When I stop, it stops. Now let's implement a scroll smoother and see what happens. I am going to import another plugin, import scroll smoother from Gsap, scroll smoother, and like copilot suggests, we are going to register that plugin as well.

and like copilot suggests, we are going to register that plugin as well. Still nothing is going to happen. This is the same behavior because we need to now instantiate our smooth scroll. Check this out, scroll smoother, do create, and I think it wants at least, uh, one argument. So we can have for now an empty object and hit save. And let's start scrolling and see if we feel a difference. Well, I definitely do

And let's start scrolling and see if we feel a difference. Well, I definitely do because I am moving my fingers on the track pad. Maybe you'll see better if I move the arrow like this, but I'm gonna scroll and stop and you can see that there is that little smooth glide happening again, some sort of lag that kinda adds a little delay and feels like things are just fluidly moving smoothly. Let's make it very obvious.

and feels like things are just fluidly moving smoothly. Let's make it very obvious. So you can see I have a lot of options available. And let's go smooth and let's go with a value of three. This should add a lag of three seconds. So now when I scroll and stop, you can see that uh, the scroll is very long. This is probably too much, but it's a good way to demonstrate. If I go up and down, you can see the delay by three seconds.

but it's a good way to demonstrate. If I go up and down, you can see the delay by three seconds. Okay, let's get rid of smooth and we will use another option. And I've seen the ease option here. So with ease you can have a lot of easing string presets that gsap offers. Let me actually show these to you. So if I go to the easing part of the documentation, you can see that uh, there is a nice visualizer

So if I go to the easing part of the documentation, you can see that uh, there is a nice visualizer that shows the ease that you can preview like this. Let's go with something a little bit silly. Uh, elastic probably is a good idea. There we go. So you can see that elastic has in out, and we can copy that string here. Elastic out one 0.3. So let me go here and go elastic out just like this. And now when I scroll, every time I stop scrolling,

So let me go here and go elastic out just like this. And now when I scroll, every time I stop scrolling, you can see this elastic, um, triggering. So if you want it to be really annoying, you could attach this to the behavior of your website. I typically recommend not doing this, but as you can see for demo purposes, it uh, makes it pretty clear that the scroll, uh, mechanism is sort of not hijacked, but embellished and you can do all sorts of things.

of not hijacked, but embellished and you can do all sorts of things. So let's get rid of this elastic bounce because it's annoying and do a little parallax effect instead.