GSAP's NEW ScrollTrigger Plugin! - Tutorial

hey everybody what's up gary simon here so today we're going to be checking out more of g sap which is the green stock animation platform now i've done a bunch of videos on gsap in the past and basically it allows you to easily create really complex user interface animations for your web apps and your projects basically um and so you could check those out i on my channel and there's there's a lot of resources outside of my channel for learning gsap and it's basically the most powerful and robust way to create awesome animations alright so they recently just came out with something called the scroll trigger plugin and it's absolutely free as far as i understand it and i'm going to show you exactly how to get up and running with it now in the past when you wanted scroll based animations when you were using gsap you had to use external libraries like scroll magic you don't have to use that anymore so now green gsap is basically your all comprehensive solution for creating animation scroll activated animations for your project so just to show you real quickly here's a very quick example that i'm going to show you how to do from scratch scroll down and we have this you know really simple silly looking sort of uh animation here and that's using the new scroll 2 plug-in or the scroll plug-in or scroll trigger plug-in rather and i will link this in the description and there's a lot of information we're just going to go over some of the basics and how to get up in running now before we begin this video is sponsored by scrimba now scrimba is the easiest and most interactive way to grow your coding skills it's a mind-blowing technology that allows you to play around the code directly inside screencast for instance you're about to watch my gsap tutorial and gsap works really awesome with vue you can learn everything you need to know about vue in scrimva's vue bootcamp it's packed with over nine hours of content and tons of interactive lessons so if you hurry up and click the link below here in the youtube description you will receive a massive discount but you have to hurry because we're limiting it to the very first 50 people all right so first off i have visual studio code open i have a new project just with some boilerplate html of course if you're using visual studio code it has emits so you just hit exclamation point enter to get to this point and all i have right here is linked up is a style sheet of css main.css inside of there there's nothing in it i'm using sas by the way if you want to use sas 2 you can just use in the extensions use the live sas compiler and also live server we'll be using that too to serve this so once you create your sas file and you have that extension installed and you select the file down here there will be a watch sas button so i've already clicked that and that outputs this main.css file here um also i do have like an illustration we're going to integrate here that stupid coronavirus stuff and then we're also going to uh uh yeah that's basically yeah just the image the css and make sure this is linked up so the way we're going to get started here um we need to get integrated by our gsap and the scroll to plugin so uh here's the main plugin page uh scroll trigger i will link it in the youtube description click that and it's going to give you uh example usage and all that good stuff we'll refer to this in a bit but we want to go to the installation all right so basically you go to the install page i'll link this up as well there's a nice little handy installer here for you so we want to use the cdn option you can use you know modules npm and codepen cdn the content delivery network this is what will allow us to go as quickly as possible so you could choose which plugins you want now by default you have to install or you have to include the core which is right here at this line and then we also in our cases we just want the scroll trigger alright so we'll copy those two lines and just to demonstrate how you can get up running in the most simple manner possible we'll go ahead and create a little bit of html here not much at all trust me so we're gonna do it um not a script but a section rather and intersection we're just gonna say you know something like scroll down and we're gonna do another section and this one's just gonna be a class of block so no box rather there we go div class box and then finally we'll do another just empty section down here and that way we're gonna use css to make each section 100 viewport height so what we'll do is we're going to say body here we'll get rid of any margin and we'll make the font family monster at i already have this installed so i'm not going to import it or anything like that and then height 100 viewport height and then also we're going to reference our section here we're say height 100 viewport height and we'll just do a text align center here for our text and then we're going to take our box and we're going to give it a background of just red a width of 200 pixels and a height of 200 pixels and we're good to go all right so at this stage we're going to right click our index.html open with live server if you included or installed that plugin and here we go we have just a really ugly example and this is going to allow us making those sections of being each 100 viewport height it's going to allow us to demonstrate the school functions and stuff like that so what if we wanted to animate and move this thing or scale it down or change the color or any number of things once it comes into view like this with gsap scroll plug-in all right extremely simple all right so we're going to come down here and put another script tag here and what we're going to say is first we're going to just say gsap and 2 our box because that's the thing that we want to animate and we're going to open that up and inside of here we're just going to say scroll trigger box so we're gonna obviously we're using the same selector here the box class but this could be a different trigger this could be a completely different html element or a class or whatever and then we're going to say what do we want to do with it we're just going to move it over by 200 now let me get 500 pixels so we're going to move box by 500 pixels on the horizontal x-axis once box becomes into view once it comes into view when you scroll down all right that's it i mean that's one of the most simple examples ever so let's see if it works now it was already in view because i scrolled down there so it already moved but if i refresh if we could see right now i it's probably right up against the edge because we're not scrolled into view yet but if we come down there it goes isn't that exciting probably not the most exciting thing honestly that you've ever seen now what we can do if we look at the documentation here that was the very simple example that they showed here let me increase the size here so we can see this there's an advanced example where you can pass in from school trigger you can specify an array right here or an object rather where you have a bunch of properties for your configuration your options so i'm not going to go through every single one of these um you know you can pin them you can have a start in an end time in terms of when you start or when the element will be animated into so for example let's go ahead and do this real quick so what we can do is we could say the trigger is going to be blocked still we'll also say start and we could say top top all right and we'll leave that there i think just like that so what exactly does this do it'll make it not start until it reaches the top of the browser now you're probably wondering what exactly does top top mean well basically if you do a ctrl f here in your browser and type in center you'll see you come down to this point where it mentions for instance bottom center so instead of top top you can specify like bottom center so what that means is when the bottom of the end trigger or basically when the the bottom of the element that you're targeting hits the center of the scroller okay so when the bottom of the element that you're targeting hits the center of the scroller so basically this has to do with uh the position of the element that you're targeting all right and then this second value base is based on the scroll bar as i understand it um so for instance if we hit if we choose bottom center and then center we save it let's refresh this should happen when the bottom of this red box ends up i matched up with the center of the scroll bar so right now see very very cool so you have a lot of flexibility in terms of you know when these things will start to uh animate in now you can also use that pin option so if we come back here we scroll up just a bit there's an option pin true all right so what does that do exactly so if we go back here and we just put in pin true this will pin it for a certain amount of time while you're scrolling down and you can also adjust that value i and it's a pixel based value right here for i for instance end right here so if you change n it will stay fixed for 500 pixels and you can adjust that number as need be now there's other ones we're not going to get into exactly just because this is a quick beginner's tutorial but let's actually now use a real kind of just a real simple real life example of how you would probably use a scroll-based activated animation so what we'll do is i'm going to just get rid of all this stuff and instead of that in this in the middle section we're going to go ahead and just make a custom class here on section oops we're not going to do that there we go classical equals we're going to call this dark it's going to have a dark background then we're going to have a content inside of it with with an h2 element that says are you really sick outside of that we'll have a paragraph go get yo sick bleep tested you might have the flu oh my god so stupid and then we're gonna have finally one more element image source images illustration and then we'll just say i don't know covet 19 or something all right so let's go to our main.sas just to real quickly update this um a bit so our dark we're just going to say text align left and then background will be almost black so we'll just go like i don't know right around there actually we'll go up a little bit higher a little bit lighter there we go and then finally we'll do color white and position relative then we're going to have our image so our image will be a width of like 50 percent um a height 100 viewport height position will be absolute and we'll do a right zero top zero in index z and x rather of zero we only have one more rule set or actually a couple more roll sets we're gonna have our content here just a padding of nine m and five m m units z index will be one to make sure it's on top of the graphic our h2 we'll just say font size it's gonna be big five m units margin bottom is going to be zero and then finally our final roll set will where your paragraph font size 1.6 m units we do have one more property i wanted to show you notice how this is squashed kinda well let's go ahead and fix that this is a cool property object fit cover never personally used that myself so now it's it's going to keep it inside but it's going to fit this automatically so it's not squashed so it has to do with eye proportions and constraining it so now this doesn't animate at all what if we wanted this to animate in maybe first the picture and then this content container that has these two type based elements all right let's get started let's go to our index all right so now we're going to create a a timeline so we're going to say let timeline equals gsap.timeline and inside of here our scroll trigger just like we did before the target or the trigger rather is going to be our dark section element and then also start we'll do center actually we're not doing it we'll add that after yeah it's going to do trigger dark if you're doing it this way and you only wanted a trigger of dark of course you could have done the shorthand way um and just said dark like that but because i do want to use other properties i'm doing it this way um and then after that after we've defined the timeline we can then say timeline from and we'll say our image we're going to target our image first that's going to the first thing that animates um it'll move from the x position of 200 so be over about 200 pixels and then it'll animate into its normal starting position um opacity will be zero and then duration we're going to say 1.5 seconds so now if we save this and we scroll down you can see how it just moves in right immediately so if i if i like barely come there it's going to start immediately so now what we'll do is say from and we'll do our content y is going to be 300 so this time it's going to come from i it's going to be a vertical sort of animation and then we'll do make a duration of one and then we can also do an offset i'll show you what that looks like in a second i'll just show you without the offset so now come down here it waits until this animation defined on this line is fully complete but it takes a while so we can do an offset where we can say minus equals one so that means start one second earlier than you normally would have by default all right so now we can create kind of more of a pleasant animation so let's refresh there we go very cool i want to add right here a start of center center of the element which is in this case is the dark trigger which is that whole you know big large section and then also bottom and that means the bottom of the scroll bar so now we come down there we go i kind of like that much better you get to see more of like the the full effect of the animation and that's basically it alright so hopefully you found that useful and now you know you're going to use gsap if you have any type of you know more complex animations trust me it makes life a lot easier when you have complex animations that you want to like rewind restart multi-step animations it just makes a lot of sense rather than trying to have to do it from scratch all right guys make sure to subscribe if you haven't yet and i'll see you soon goodbye [Music] bye

Channel: DesignCourse

Views: 61,417

Keywords: gsap, gsap scrolltrigger, scrolltrigger, gsap tutorial, gsap course, gsap 3, gsap 3.0, gsap 3 tutorial, gsap scroll plugin, gsap scroll, gsap scroll animation, scroll animation css, css scroll animations

Id: ygcEKd0RIGg

Length: 18min 24sec (1104 seconds)

Published: Thu Jun 11 2020