Introducing ScrollTrigger for GSAP

this is gonna be a walkthrough of the brand new scroll trigger plugin for G SAP which I'm very excited to share but before we get into the details here's just a taste of what it can do so in this first example you'll see that as we scroll down we get to this section that gets pinned while I continue to scroll it's revealing the image if I scroll backwards you'll see that it goes the other way and then once I reach the end then it becomes on pinned and we continue down the page so pinning is included in scroll trigger and then we also have this slide in panels example where as I scroll down you can see that it gets pinned and then another second comes in from the left another one from the right and then finally from the top we also have this one where scroll trigger tracks the velocity of scrolling and we link that to the skew of these images so the faster I scroll the more they get skewed we can also pair this with CSS scroll snapping so as I really scroll it kind of snaps to these sections now here's a parallax example where as I scroll down you can see that the background image seems to scroll at a different rate here's an example that as I scroll you know scrolling is linked to this path now this is a relatively advanced example where as I scrolled down it's actually causing things to appear to scroll horizontally and that's actually just an animation and also we've got snapping applied so as I release it's always landing at one of these sections which again is inside of a timeline just an animation and then lastly this is a pretty advanced example from motion harvest and code pen and as I scroll we're kind of going through this tube now let's get into the details and we'll start with a common problem that scroll trigger solves here I've got three boxes a B and C and I have a twin set up that animates box a along the x-axis and it rotates it so we can see that that animation works great but what happens if I change this to animate boxy and I refresh and then if I wait for a second or two and then I scroll down oh the animation already finished we didn't get to see that lovely animation we can solve that by simply activating the plug-in and then all we have to do is add a scroll trigger and if I run this and then I wait a second or two and I scroll down oh we get to see the animation this time yay but if I scroll back down and up again you know it's it stayed where it was of course what if I want that to replay every time it enters the viewport again or maybe I wanted to pause when it gets you know when it leaves the viewport at the top how would I do that well let's talk about toggle actions now since we're gonna configure this scroll trigger we will make it into an object and in that object we will make the trigger the same thing that we had before and then when a scroll trigger activates or deactivates it can tell the animation that do something so by default toggle actions look like this so we have these different positions there's four different positions it's a string with a keyword in each spot and I'll talk about each of these positions in a moment the keywords can be any of the following play pause resume reverse restart reset complete or none in this case it is just playing when it enters the screen maybe we want it to restart each time it enters the viewport so if i refresh we'll see that okay it plays just like before but if i go back down and and out of view again and then i bring it back in it restarts now the next position is for when it goes forward past the endpoint let's try making that pause so will rerun this and we'll notice that if we scroll really fast now it left out the top of the viewport then we come back in notice that it's paused now we probably would want to do something else when it comes back in of course when it entered from the bottom again that was the restart toggle action referred to here and so if we want it to resume when it comes back in that's this next position so we'll change none to resume and if we on this we'll see that indeed it restarts then it should pause it here and then when we come back on screen it resumes it perfect just as we would expect we could even reverse it here run that go off the top and then when we come back in it goes backwards and the final position is for when we scroll all the way back past the start usually pause or reset is good here so if we do something like this it not only ensures that viewers actually see the animation but it improves the performance by not animating things that are off-screen but what if we want to link the scrollbar to the animation salute it acts like a scrubber well we'll get to that later but first let's talk about positioning our scroll figures with start and end properties and by default the scroll trigger starts as soon as the trigger element which is box C in this case enters the viewport at the very bottom but we can tell it to start instead when the top of that trigger element is the center of the scroller which is the viewport so if we run this we'll see that when we scroll down it doesn't start when it enters the viewport it actually waits until it hits the center before beginning so again this first value relates to the trigger element and the second value in the string relates to the scroller itself which is the viewport in this case now to visualize this better we're gonna add markers so we just say markers true and when we run we get these fancy markers that give us a visual indicator of when things should start so on these two green lines line up and you know this one passes the other one that's when it starts now you can use keywords like top center or bottom but you can also use pixel values or percentages which are always relative to the top so for example if we say 20 pixels from the top of the trigger elements when that hits 80% down in the viewport that's when we want to make this scroll trigger start so if I run this and scroll up we'll see that indeed it works as expected the trigger start here is when he picks those down from the top of that and the scroller start is 80% down in the viewport now we can also define an end which by default is when the bottom of the trigger element hits the top of the viewport but maybe we should make this into a hundred pixels and we run and we see that indeed the scroller end is a hundred pixels down from the top and the trigger position is at the very bottom of that as well now for the end value we can also make it relative to the start so for example if we want it to be 300 pixels from wherever the start happens to be and this is a very common thing to do just use the relative prefix there plus equals and then 300 we can have PX on there or not doesn't really matter and if we run this we'll see that indeed it is precisely 300 pixels further down from where the start is in fact you can even use a function for dynamic values and it will get called whenever the screen is resized as well so for example if we want the distance between the start and the end to match the width of the elements that has some fancy responsive CSS applied we could do something like this so it's just a function that's returning a relative value that is the offset width of the see elements so it's 100 pixels and let's make this Center Center just to make it a little more visible here run this and indeed as we scroll down we'll see that it is indeed a hundred pixels down from the other and you're welcome to use a function value for a start as well and by the way you can use a completely different element for the end trigger so in this case they're both relating to the trigger but perhaps we want to say the end trigger should be C and the starting one should be a and we're gonna animate element B so when the top of the a element hits 50 pixels down from the top into the viewport and the bottom of element C it's 80% down from the top the viewport it's a 10 so run this and check this out when the green starting lines cross it begins when the red end lines cross it ends so you get ultimate flexibility in defining where your swirl triggers start and where they end now up to this point scroll trigger has just been toggling the playback state of the animation so when we pass the start it begins the animation even if I go forward or backward in between it just continues to play however watch what happens if I add scrub true to the scroll trigger and rerun this now you'll see that when we pass the start anywhere in between there it's actually locking the animation playhead to the scrollbar so that no matter which way we go it's always in lockstep with it but you can smooth that out if you want you can actually make this to a number which is a time in seconds that it should take the playhead to catch up so if we put one here it's gonna take one second to catch up and we'll run this and you'll notice that there's a ghosted you know gray sea back there which let's tap into that so we can see the comparison if I just copy this whole thing paste it down here and we'll be animating the ghost and everything else is the same except the scrub we'll just set it back to true so that we can see the comparison between the two so now as we scroll past we'll see that it takes the orange one a little time to catch up in fact it takes a second for it to catch up exactly and we can exaggerate a little bit more set it to three and you'll notice that it is indeed taking longer to catch up it's a very smooth effect and note that this is not scroll jacking it is merely affecting the playhead of the Meishan the native scrollbar is you know the whole pay the rest of the page is animating exactly in lockstep with the scrollbar it's just animation that is lagging intentionally to smooth things out and this isn't just for simple tweens here let's get rid of the ghost and we can use the scroll trigger in a timeline so I'll copy this out of here and we'll create a timeline inside the bars for that will put the scroll trigger and then we'll add these tweens to that timeline and we'll add a few more and now if we run this you'll see that the entire animation is scrubbing back and forth the whole timeline pinning can take your scroll based animations to a whole new level now before we pin anything let's just again look at how this works we've got scrub enabled and so as we scroll up the page you know see is the orange see is moving up on the screen as well because of course we're scrolling up but if we say in true and then run now when we scroll up past the starting point it becomes pinned in place while that trigger is active now you could pin any elements here it doesn't you don't have to say true said true it assumes the trigger is what you're talking about that you want to pin but we could say like ghost for that other elements in the back the gray see so now as we scroll up see is pinned in place I'm sorry the ghost is pinned in place or he can pass in a regular Dom Maitland opinion is even more useful when you're dealing with sections or panels in your site so here is an example let me run this we have some things commented out here don't worry about the code yet but we have this this timeline animating the X % + y % of a few different elements which we can't really see right now but again if we run it here then if we scroll down really fast that animation is playing down here these are all absolutely positioned inside of a container element and so without swirl figure those are just kind of running right away but if we enable the swirl trigger and you'll notice that this is a kind of a different syntax we haven't seen this before we could easily embed this inside of the timeline but I just wanted to show you that you can use scroll trigger and create a scroll trigger independently and then you can pass in an animation you know a timeline between whatever in this fashion and we'll go more into this syntax later on when we talk about customizing but for now we'll just note that the trigger is the container and then we are pinning it and scrubbing it and so now when I run this the animation is not playing and then we scroll down and now we get to the container element and it pins it so now when I scrolling down well if I scroll back up you'll see you know this is in lock step with my scrolling and so this is what creates that effect we're just scrubbing that animation back and forth here now by default scroll trigger adds padding to the bottom of the pinned elements so here I've got no pinning enabled this is just to show you how things are laid out we've got some panels that are all the full height except for this orange one okay now if I enable the pinning on this scroll trigger here let's just see what happens so now when I scroll down we'll see that there's gap in between and when it becomes unpinned everything is caught up so since we're pinning it for exactly 300 pixels that's how much padding was added under here so again that makes it so that when things catch up you know there's no overlapping so if we disable this which we can do by saying in spacing false and then we run this now when we scroll down we'll see that there's no spacing but now when it becomes pinned things are overlapping for the duration of that pin which can actually be beneficial you can use that to your advantage like in this demo where again we've just got a bunch of panels laid out like this and then now when I enable this and I run it all we're doing is looping through each panel and creating a scroll trigger for it that pins things and disables pin spacing so now when I scroll up we get this really cool layered effect what the panels coming in on top of each other now speaking of panels let me show you two other techniques that are really useful so here i've commented out all the code but we have this just layout where there are several panels that are kind of side by side so i'm scrolling here left to right and what if we want to wire this up so that the user could scroll vertically to have this appear to scroll horizontally so all we got to do is disable the overflow of X so that now users cannot scroll that way anymore so now they can't get to the other panels but now if we uncomment this code we'll see that we're just we have a simple tween of all the sections we're grabbing them we're making them into an array here and the main reason for that is so that we can get the length meaning we could add as many panels as well later on and it will all this all work but we're just animating the X percent of all those you know based on the number of of panels that we have in there and then we're setting up the scroll trigger so that it's going to pin the the container and when we run this you'll see that sure enough now we have this vertical scrollbar and that's again because by default scroll trigger will add the padding to the bottom of the element that's pinned and so we get this nice long scroll bar and you'll also notice that there's this snap value here and it's just one divided by you know the number of sections or the panels minus one so this is always going to be a progress value actually there's a whole bunch of different things you could do here and I won't get into all of them check out the docs you can have it snap to labels in the timeline you can use your own logic the custom function whatever but in this case we're just basing on the number of panels or sections that we have and so you'll notice that if I scroll right to you know where it's sort of in the middle of two sections and I release it automatically goes and kind of lands on the closest section and if I you know use my mouse wheel same kind of thing it won't let the users just get stuck in between two different panels it applies this snapping and we have the smoothing applied here because we set scrub to one so it's taking a second to kind of catch up so it's this really nice buttery smooth effect for panels you know very advanced kind of features with relatively small amount of code and you also notice that the end value is a function and it is returning the width of the container element so that just makes it feel more natural because you know if you're on a mobile device with a small screen it'll act differently than if you're on a you know a big desktop monitor so this function gets called every time the screen is resized and so this is all dynamic this is all you know if you have media queries and and things are resizing and such it'll all just work a scroll trigger is not just for animations the syntax I've been showing you is the most concise for animations but you can create scroll triggers independently and then just use the callbacks to do just about anything you want so I can take this animation and use exactly the same object and just wrap it like so and now this in and of itself won't do anything but let us a-and on enter callback and we'll also add an on leave and if we run this we'll see that if you scroll down then as soon as we cross the start there says we entered in the console and then we leave but if we go backwards you'll notice there are no callbacks until we go forward again and that's because those are different callbacks one is on enter back when you go backwards into the viewport and then there's on leave back so now if we run and clear this will see that we enter we leave and then we enter back and we're all the way back now there's also in on update which runs every single time the scroll trigger is updated and we actually get a parameter past each one of these which is the support trigger instance itself and that has various properties like progress which is a number between 0 and 1 indicating the progress from the start to the end instead of a crazy long number we'll just say 2 fixed so 3 decimal places so now if I run this and I clear out the console we should see that as it goes we get the values between 0 & 1 for progress there's also an on toggle and we can check to see if it's is active and on taco runs every time it changes between inactive and active or the other way around now another really useful feature is being able to toggle a class so if we say toggle class and we'll just say active so in the CSS I do have an active class that will set the box to blue when it is active and sure enough whenever that element is in between the start and end it gets that class add it to it and you can add that class to multiple elements not just the trigger if you want you have total control just see the docs for that now you can also add an ID which is an arbitrary string so we can just say my ID and then when we run this well notice that that ID gets added to the markers everywhere so when you have multiple scroll triggers this is really useful to be able to see which markers go with which thing and it also lets you reference that instance and grab it by the scroll trigger it out yet by ID method now another very useful feature is the ability to set defaults so if we have a lot of scroll triggers on the page and we want to have them all use the same kind of toggle actions by default we could do this and we could also say markers true so we have this one spot that we can kind of enable markers across the board and then when we're ready to push our site outlives we can remove that one line and we're ready to go because of course you wouldn't want markers in your life site now by default the scroller is the viewport but you can define a custom one so you can say let's say you have a div with an ID of container this will make the scroll trigger watch the you know the scroll position of that elements instead of the viewports and finally by default it looks for vertical scrolling but if you'd like to switch it to horizontal you just say horizontal true and it will watch for horizontal instead of vertical I think you're gonna love all the possibilities that scroll trigger opens up for you and it's tight integration with G SAP should make it easy to get up and running fast as always if you have any questions head over the green sock forums get squirrel trigger today at green sock calm happy tweeting

Channel: GreenSockLearning

Views: 102,720

Keywords: scroll, scrolltrigger, gsap, scrolling, javascript, animation, scroll-based animation

Id: X7IBa7vZjmo

Length: 21min 43sec (1303 seconds)

Published: Mon Jun 01 2020