FREELessons: 8Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 ScrollTrigger.js

ScrollTrigger is a library that toggles certain classes on various elements based on your browser window’s scroll position. In other words, you can use it to add or remove classes when you scroll to a certain element.

There are many potential use cases for this, but probably one of the most popular is to trigger an animation on an element when you scroll down to it. Let me show you an example to see how it works.

Related Links

2.4 ScrollTrigger.js

ScrollTrigger is a library that toggles certain classes on various elements based on your browser window's scroll position. In other words, you can use it to add or remove classes when you scroll to a certain element. There are many potential use cases for this, but probably one of the most popular is to trigger an animation on an element when you scroll down to it. Let me show you an example to see how it works. So I've prepared this demo page here which has four distinct sections. This is the first one, and as we scroll down we can see the other three. Each section has this text on the side and an illustration on the other. Now, what I want to do with this is, when I scroll down I want these elements to animate in, and when I scroll away I want these elements to animate out, and I want the next ones to animate in, and so on and so forth. So ScrollTrigger is the perfect plugin for this job. You can get ScrollTrigger by visiting the official GitHub page, you can find the link in the lesson notes. And let's go ahead and install it. Two ways you can do that, either by using NPM, if that's something you're familiar with, or you can simply download this whole GitHub repository and you can then reference scrolltrigger.jsword.min.js in your file. So I did exactly that, I downloaded this library and I've opened up everything in my code editor. As you can see, I have scrolletrigger.min.js. I have a style.scss, which I'll use it to add some styling to this page, and I have the index.html which contains the code responsible for what you saw right here. So first things first, let's load the plugin. To do that I'm gonna go all the way down to the bottom of the page and I'm gonna say, script src="scrolltrigger.min.js". And now our script is loaded, it's time to activate it. So I'm gonna add another script. I can do this here inline, in the HTML file, or you can have an additional JavaScript file, it doesn't really matter. So I'm going to say var trigger, you can call this whatever you want, it's a variable, new scrolltrigger.default, okay? And below that trigger.add, and we're gonna add all the elements that have the attribute data-trigger. All right, now let's go ahead and add that particular attribute to the elements that we want to show and hide and so on. The content of each section is divided into pieces. We have a div class content which contains the text, and then we have an image. And I want to animate both of these, so I'm going to add data-trigger to both the image and the div class content. Okay, I'm gonna do the same here, image and div, data-trigger, and of course we don't have a value there. And I'm gonna do the same here. Data-trigger, and also, let's do it on this content here. This is the original content that you see here. All right, now, if we take a look at the code here, and actually let me open this in Chrome because I wanna show you the the inspector. I want you to pay close attention to the content and the images, right? And you can see that already they have a class called invisible, which I didn't add, right? If we take a look at the original source code, I don't have an invisible class, but that class has been added by ScrollTrigger and the element that is in vision has a class of visible, as you can see here. Now, watch what happens when I scroll down. See? This content is starting to become visible. See, two new classes have just changed and now the first one is invisible. And you'll see that as I scroll down, the rest of the classes will change, right? The elements that will come into the viewport, that will become visible, gain the class of visible, while the others get the class of invisible. And it works the same way when I scroll up. Now, the next step is to define the classes of visible and invisible. I'm gonna open up my style.scss. And I can say the following, visible and invisible. I can set opacity to 0. And I can set a transition, let's say 0.2 seconds ease-in-out. And then visible, I can set an opacity to 1. So now let's see what happens. You'll see that as I scroll down, I started getting that transition from 0 opacity to 1 opacity. Now, in case this is not visible right away, let's change some properties to the way the plugin works. So right here, I can pass in an object where I can specify some options. So I'm gonna say trigger, and this is yet another object, and I can specify an offset in that element, and then I can change the X or Y position. So for Y I'm gonna say, 300. So that means that the animation is not executed the second the element enters the viewport, but instead you get a slight delay, so to speak, okay? So now you'll see that I can scroll down even further. And once I get about, I don't know, halfway, one of these sections, then the classes won't change and I get that animation. And it happens the other way around as I leave, or as that section leaves the viewport, it animates out, right? So it becomes invisible. Saw that? There goes the image. And now, there goes the text. And the other text appears, and then the other image appears, and so on. This happens with all of my sections. Now, just by transitioning the opacity from 0 to 1 doesn't really add much to the whole experience here, so why don't we switch it up a little bit and create some more complex animations? To do that, here's what we'll do. We're gonna change the way elements appear. We're gonna keep the opacity animation, but we're also gonna add a transform. So to do that I'm gonna say, data-slideInTop. That means I want this element to just slide in from the top side, so from top to bottom. This is an additional class that I'm gonna add to all the elements. Next, is this content? Now, in my example, this first content is on the left, so I want it to enter from left to right. So I'm gonna say, data-slideInRight. And then for the image I'm gonna, say data-slideInLeft. On the third one I'm gonna say, data- on the image, slideInRight, and on the content, slideInLeft. And I'm gonna do the same for this one, slideInRight, and on the image, slideInLeft. All right, now let's go ahead and write these animations. visible, invisible, we don't actually need these right here in this form. Because we're gonna define them like so, data-slideInLeft, with the class of visible, and data, slideInLeft, with the class of invisible. Let's go ahead and copy these. And then data-slideInRight, And slideInTop. We'll do this, we'll set the opacity to 1. And we'll also set a transform, translate3d(0,0,0), so we're basically resetting everything here. And then transition, we'll say transform, let's do a one second ease. And opacity, one second ease. All right, so then we gotta take each invisible animation and define its properties. So we'll say [data-slideInLeft].Invisible. We'll set the opacity to 0 and we'll do a transform: translate3d, let's move this to the left, 3rem. Then we'll do slideInRight. Same thing, opacity 0, transform: translate3d. This time we'll do -3rem because we wanna push it to the other side. And finally, slideInTop. We'll do translate3d, 0 here, and -3rem on the Y axis. And with that done, let's check it out. You'll see that now, as I scroll away, I get that nice animation there. And on the other elements I get, Slide in from the right, slide in from the left. And the same goes for the other ones. Now, one thing that I wanna do here is to prevent these elements from repeatedly being animated. Because I'm opening up the page and I'm going through them and I see these nice animations, and it's all good, right? I don't need to hide them, so that they're animated yet again when I scroll back up, okay? So you can actually do that with ScrollTrigger by setting the once property to true. So here's how you do that. You go to trigger, and in here you set once: true. So now you only get these animations once, right? As you can see, all of the elements are now still there, they did not animate out. Now, if I want certain elements to be always triggered, here's what I can do. I can set a special class here. I can call it, of course, whatever I want. I meant attribute, not class, excuse me. In my case, I'm gonna call this data-trigger-always. And I'm gonna go down here, and I'm gonna say trigger.add('[data-trigger-always]'). But to this I can attach an object where I say once: false, okay? So that means that any elements with the attribute data-trigger-always will always get triggered, right, while the others with a simple data-trigger attribute will only be triggered once. So let's see that in action, let's do a refresh, scroll down. Here are all the animations. And now, when I scroll back up you'll see that the contents of my first slide will be animated. There we go. And it's gonna keep doing that, because it's always being triggered, but the rest of the elements on my page are unchanged. Now, when it comes to configuration there are a bunch of options for customizing how this plugin works. If you check out the official GitHub repository, right here under Options you'll find every single option you can add to ScrollTrigger to customize it to your liking. For example, you can change the toggle classes instead of those default visible and invisible. You can add callbacks, and so on. Have a look at these, and also have a look at the official demos of the plugin. All right, that's it for ScrollTrigger.js. Now let's move on to the next plugin, which is called LazySizes. This is used to lazy load images, and this is a very important process for increasing a page's performance. More about that in the next lesson.

Back to the top