I will get rid of the ease and go back to our empty scroll, smoother create call, and instead I'm going to use the effect. So the effect is a bullion and I will set it to true. Just doing this is not going to change anything, but it's going to enable, uh, the ability to add some, uh, paray effects to elements. Any elements on the page, let's go in the template here and check this out. Uh, there are are three squares

template here and check this out. Uh, there are are three squares and for the first one I will add a data attribute. Data speed equals 1.1. Aha. You can see that it's already moved a little bit and watch what happens when I scroll. A, the speed of that square is now 1.1 what the rest of the page is. In other terms, it's uh, accelerating or moving up and down 110% faster than the rest of the page.

In other terms, it's uh, accelerating or moving up and down 110% faster than the rest of the page. So if I was to go 1.5, it would be a lot more obvious and that is pretty cool, huh? This is parallax. Let me, uh, add different values to the different squares. So we're going to go back to 1.1 and the last one we can go data speed equals 0.9 and keep the middle one to one. And now we have this nice little para lae effect.

0.9 and keep the middle one to one. And now we have this nice little para lae effect. Eric, if you don't like doing it through data attributes here, you can also do it via JavaScript. But I think this is pretty cool to have data attributes like this. It feels a little bit like alpine js to me and it's kind of nice here. I wanna show you another opportunity to have a positive lag.

and it's kind of nice here. I wanna show you another opportunity to have a positive lag. Uh, what I mean is by adding a bit of lag to the elements, they are going to feel more physically real and have some sort of weight to them. So in the uh, squares where we added data speed, we can also add data lag. So like this data lag equals 0.2 and maybe let's make the second one data lag. 0.4 in the last one, lag 0.6.

and maybe let's make the second one data lag. 0.4 in the last one, lag 0.6. You can see that not only are they parallaxing, but they also have a subtle delay. I think that's not enough delay. So maybe let me change these to 0.4, 0.8, and 1.2. And hopefully this is more logical now. Yeah, I guess you can see it now. The square on the left is always starting a bit faster

Yeah, I guess you can see it now. The square on the left is always starting a bit faster and everything else is catching up. And again, when you move up and down, you have this nice, uh, it feels like things are underwater, for example, where everything takes a bit longer to change directions. Uh, so you can play with the weight and feel of objects and elements by adding a bit of like, I like it. Okay, this is cool and old,

and elements by adding a bit of like, I like it. Okay, this is cool and old, but when people think of parallax, they typically think of an image that as, uh, the viewpoint is crawling. The image is sort of changing its position behind a cropped background. So let me show you that example real quick to wrap up this lesson. So I'm going to comment out the squares and instead I will have an image

So I'm going to comment out the squares and instead I will have an image and the source will be an Unsplash image. It's that really nice photo of a Nike shoe. Uh, and we are going to put this image in a overflow clipped container. And I've actually already written the CSS for that. So we can wrap it in an image wrapper div. It's gonna set a fixed height and overflow clip. So here, let's go that image wrapper

It's gonna set a fixed height and overflow clip. So here, let's go that image wrapper and wrap the image inside of there. There we go. So we have this pretty cool looking, uh, Nike image. And as you've seen just before, the image actually goes higher, but it's cropped now, uh, because of the overflow clip container. And so because we have the effects turned on in our scroll

because of the overflow clip container. And so because we have the effects turned on in our scroll smoother, I can just like I did here, add a data speed. So check this out, let's go. Data speed equals uh, 0.8. Let's try that. And now when I scroll, aha, how simple was that? This is pretty cool. But, um, I wanna show you a magic value that you can use and it's auto. So if I put data speed auto here,

that you can use and it's auto. So if I put data speed auto here, a GSAP will calculate automatically how much to parallax the image so that when you are at the bottom of the scroll, it is showing the top of the image and vice versa. So actually let me go in the CSS and I want to change the, um, padded value to a hundred view port height so that we can scroll completely out of bounds.

to a hundred view port height so that we can scroll completely out of bounds. And so now we're going to see the image scroll progressively. The scroll is, is finished, the parallax is finished. When the top of the container hits the top of the viewport right here, you can see here the image stop parallaxing, and then the other way it goes when it starts. That is really cool stuff.

and then the other way it goes when it starts. That is really cool stuff. And uh, as you've seen, it's super easy to just drop in a data speed attribute on any element and have it parallax. Lets for kicks, bring back these squares, uh, to show all things parallaxing on top of each other. And it's really, I gotta say super cool. You can see the lag compared to the image and it's buttery smooth and really, really nice.

You can see the lag compared to the image and it's buttery smooth and really, really nice. Okay, uh, honestly, I could do another 10 lessons on Gsap. I love it that much, but we have to decide to stop at some point. So I hope I've inspired you to play with Gsap. We only have used one plugin and then barely scratch the surface of this scroll trigger, scroll trigger, sorry, uh, plugin and things you can do with it.

scroll trigger, sorry, uh, plugin and things you can do with it. There is no shortage of coolness in Gsap. There's lots of videos explaining you how things work. If you wanna dig further, if you want me to do a full course on Gsap, I would love to do this. Maybe talk Jeffrey way into having me do that. But seriously, I hope you enjoyed it and, uh, it's time to wrap it up. Thanks for watching this. I'll see you in the next one.

and, uh, it's time to wrap it up. Thanks for watching this. I'll see you in the next one.