Scroll Trigger Tutorial - 7 - Standalone ScrollTriggers

hey everybody it's greg fine here the code creative back with yet another charming little scroll trigger tutorial and in this one we're talking all about creating a standalone scroll trigger instance what does that even mean well in previous videos we saw how we could use scroll trigger to trigger animations and we did that in tandem with gsap's2 method and the timeline method in those cases we were passing objects into those methods and defining scroll trigger as a property on those objects what we're going to do here however is we're going to create a standalone instance of scroll trigger and what that's going to allow us to do is to trigger functions based on the scroll position all right so let's get into an example so in this example what i want to do is i want to trigger a class once i've scrolled down a certain amount in the viewport now right now in my browser you can see if i scroll down you can see on the bottom left that blue box coming into view what i'd like to do is i'd like to change the color of that blue box to red once i've scrolled down a certain amount in the viewport so let's take a look at the code for this you can see on the left i have my index.html file and if you're coming from the previous videos in this series you'll know that i'm linking to my styles.css file on line 7 and my various scripts here from lines 15 to 17 for my javascript but as far as the html markup for this example all i have are three separate divs the first one and the third one with the class of panel and then that div for the blue box on line 12 with a class of box in the css file you can see that for the panel divs they each have a height of 100 vh with a background color of beige and giving them this height of 100 vh is going to give us that scroll bar that we need for this example now the box itself is a simple div with a width and a height of 100 pixels and a background color of blue now what i'm also going to do is i'm going to create another class and i'm going to call it box red and this one's just going to have a background color of red so what we're going to do with our scroll trigger standalone instance is we're going to toggle this class box red once we scroll down a certain amount in the viewport and when we do so that's going to give this box that background color of red so let's move into our javascript file now and see how we can accomplish this all right so now i'm going to go into my file directory and i'm going to open up my app.js file let's close the styles.css file to make some room on the screen and here we're basically starting fresh we're just registering the scroll trigger plugin on line one now the way that we create a standalone scroll trigger instance is like this we do scroll trigger and notice that the s is capitalized here as well as the t and we're going to use a method called create so we got scrolltrigger.create and then we'll give it a pair of parentheses and within these parentheses we're going to pass in an object and this is going to have all the various properties that we want associated with our scroll trigger instance so for our trigger we're going to use our box so we'll say trigger and for its value we'll do dot box so that div with the class of box is going to be the trigger and then we'll create some start and end properties for our trigger zone so we'll say that when the top of the box reaches 80 percent down from the top of the viewport that's when that class that we want to toggle is going to be triggered and then we'll set the end markers to be when the top of that box reaches 50 percent down from the top of the viewport that's going to be when we toggle back to the original class with the background color of blue so as you know from a previous video when we talked about markers we can add a markers property so that we can see the zone between the start and the end points and we'll just give that a boolean value of true so now before we do anything else let's just save and let's go to the browser to see those markers so this is what we've got so far we can see we have our scroller start here 80 down from the top of the viewport we have our scroller end fifty percent down from the top of the viewport and then when i scroll down we can see the blue box on the left side of the screen and we can see that its start point is at the top of the box so what we're going to do is we are going to set up a property now on that scroll trigger instance so that when the top of the box hits this scroller start here we're going to toggle that class that we added to our css which was the class that we called box red with the background color of red let's go ahead and do that in our javascript file right now coming back into the javascript file all we have to do now is add one property to this object that we're passing into scrolltrigger.create and scrolltrigger gives us a property we can use to toggle classes simply called toggle class like that and we can pass in here the class that we want to be toggled and as we said that class is called box red like that and in this case this class is going to be applied to the trigger element itself which is that div with the class of box so let's save and go back to the browser and see it in action so i'm going to start scrolling down notice the box is blue right now on the left side of the screen and as the top of that box meets the scroller start here it toggles to that red class and now as i continue scrolling we're going to see once the endpoint of the box hits the scroller end there we go it toggles back to blue so in this case we're seeing a standalone scroll trigger instance triggering that toggle class when it first hits the scroller start point and then when it hits the scroller endpoint oh snap now let's look at a few more real world use case scenarios where we might actually use a standalone scroll trigger instance to toggle a class well here i am on this website called experianglobal.com and what i want you to pay attention to is the nav bar when i start scrolling down so check it out this is a common effect that you'll see on many websites you see that when i started scrolling down the nav bar changed to a background color of white and the color of the text changed as well so i'll go back so you see how the text is white in the background we're getting from this background image but once i start scrolling down a little bit more you can see how these classes are toggled where we get a background color of white and we get that text changed to a color black and now here's another website that does a similar thing called capitalnumbers.com and check the navbar on this one as i start scrolling down so there you can see another similar thing where that navbar changed once i started scrolling so i experimented with the code and i tried a similar idea myself although not as pretty as those examples i showed you this still demonstrates the basic functionality so i made my nav bar here i gave the text the color of white and i added these links home about in contact right typical stuff you'd see in a nav bar and then i just added a whole bunch of lorem ipsum text here so we could get some scrolling action but what i want to show you is that i'm using a standalone scroll trigger instance to toggle a class which is going to change the background of the navbar to white and the text color to black once i scroll down a little bit so check it out see see that change there and if i go in reverse that class is toggled back to its original state so i'll just show you that one more time there you go and back so let's take a quick look at the code for that so here you can see the html that i created for this example on the left side in the styles.css file on the right side and for the html i've got a nav element here with a ul and three lis inside of that for home about and contact and then i also created a div with the classic panel and a paragraph tag within that with a whole bunch of lorem ipsum just so we can get some scrolling action going and then in my styles.css file you can see all the rules that i created for this example i'm not going to go through all of them here because it's not fully relevant for the topic of this video but just notice on lines 32 through 35 i'm defining a rule for a nav active class and that's the class that we're going to toggle in this example which is going to give the nav a background color of white and change its text color to black so now check out the standalone scroll trigger instance that i've already set up here in the javascript file notice on line 6 i have my trigger which i'm setting to be that div with the class of panel and on line 5 i'm saying that when the top of that panel div meets 6 percent down from the top of the viewport that's when i want to toggle my class of nav active and notice what i'm doing on line seven in this case i'm setting the value of toggle class to an object rather than a simple string and the reason i'm doing this is that i want that class of nav active to apply to a different element than the trigger element so in this case i want that nav active class to apply to the nav itself and this is how we can do it we set up an object we set a target's property which like i said is going to be the nav element that's going to be the target and the class that we want to be applied is nav active and remember that's that class with the background color of white and the text color of black and just so we can get a clear view of what's happening let's uncomment out the markers which are set to true so we can see our markers in the browser's viewport so now taking a look at the top right of the screen i can see my scroller start point here and even though we didn't explicitly set the scroller endpoint the default is going to be the top of the viewport so that's why we see scroller end here and then the top of the panel div is right here so when i scroll down and this start point the top of the panel hits the scroller start we're going to see our nav active class being toggled there you go and when i go in reverse that class is once again toggled back to its initial state now of course we can do much more than simply toggling a class back and forth with a standalone scroll trigger instance for this example i'm going back to my initial setup where i had this beige panel and then that blue box that enters you can see on the bottom left and looking at the code for the scroll trigger instance what i want to show you is that we have access to all these hooks which if you saw the video on toggle actions you're already familiar with and those are the on enter on leave on enter back and on leave back hooks so what we can do with the standalone scroll trigger instance is we can trigger a function when these events occur so just for demonstration purposes i've simply console.log out some text on each of these events so when that div with the class of box hits the scroller star point which is 80 down from the top of the viewport we're going to simply see the word enter logged out to the console and then when we leave that scroll trigger zone we're going to see leave in the console on ends are back we'll see enter back on leave back we'll see leave back so let's go ahead and try it out so here in the browser what i'm going to do first is i'm going to open up my console on mac you can just do command option j for a shortcut and then i'm going to start scrolling down and notice once the blue box gets into the scroller zone that we see that on enter event trigger our function so here we go check out the console and we see enter and now we're going to see the box hit the scroller end and so we see leave and now let's come back in reverse we see enter back and as we come back even further past the scroll start again we see leadback so even though i'm just console.logging things here you can have these events trigger any function that you want now let's comment out these lines now let's look at another event that we have access to and that's called on update and again we can set its value to be a function and we'll do console.log again but what i want to point out is that on all these events we have access to the scroll trigger instance itself and that gets passed in as an argument to the function and we can call it self and we'll just console.log out self for now so we can see what we're getting so what this on update function is going to do is as we progress throughout the scroller zone defined by these start and end points this onupdate event is going to be triggered constantly as we progress throughout that zone so now back in the browser let's scroll down and keep our eye on the console so we can see that on update event in action so i'm going to start scrolling and as soon as that blue box hits the scroller start there we go we can see the scroll trigger instance itself and notice that it has a progress property on it so as we scroll through the start and end zone you can see that progress increasing showing us the percentage that we've gone through the zone so you can see we've gone about 50 percent of the way and as we continue up we finally get to a value of one so there are other events that you can hook into and for a full list of them you can look at the docs for scroll trigger like for example here that you can see we also have on refresh and on scrub complete on snap complete and so on so i'm sure with some experimentation you can find some really cool uses for a standalone scroll trigger instance now if you enjoyed this video if you feel like you got some value out of it please give the video a like and consider subscribing to the channel and hit that notification bell icon so you can get notified of new videos when they're released i'll see you next time

Channel: The Code Creative

Views: 3,095

Rating: 4.9749999 out of 5

Keywords: gsap scrolltrigger, gap scroll trigger, scrolltrigger, scroll trigger, greensock scrolltrigger, greensock scroll trigger, standalone scroll trigger, standalone scrolltrigger, standalone, gap standalone, animate on scroll, scroll animation, scrollmagic, scroll magic, scrollmagic tutorial, scroll magic tutorial, greensock, scroll trigger tutorial, scrolltrigger tutorial, the code creative, gregg fine, web development, web development tutorial, coding tutorial, javascript tutorial

Id: 7YsNBbQ55H8

Length: 14min 0sec (840 seconds)

Published: Sat Dec 12 2020