A 1kb Scroll Animation Library? Hello Scroll-Out

today you're gonna learn how to use scroll out which is a micro JavaScript library for scroll detection oh and hey I'd like to point out this videos awesome sponsor Skillshare comm which offers thousands of classes in design coding business and more for instance you're about to watch my tutorial on animations but you could watch this full course on css3 animations at Skillshare now Skillshare is just ten bucks a month but if you're the first 200 students to use my very exclusive link below in the description here in youtube did you get the first two months free alright so let's get started everyone Gary Simon of course Etro so today we're gonna cover a micro library as it's called because it's so small but it is quite Beecher pack for detecting scroll so what this allows you to do is attach CSS animations to it and you could also use something like animate CSS in conjunction with it and the primary benefit is the fact that it's it's it's even more lightweight than the one that I covered in the previous last month I called Sal Jas which is a 2.8 KB library but it allows you to do a lot of the same things and even more so all right so I checking back here I this is available at github comm squirrel out - scarf or slash squirrel out there's a guide that's gonna show you how to do everything I'm gonna cover all the basics for this and yeah so we're gonna go ahead and get started but before that answer today's question which is when fielding landing pages how often do you use scroll based animations is that a hundred percent of the time or maybe only a few cases or examples here and there let me know in the comments I'll let you know my thoughts and let's go ahead and get started all right so let's get started basically this is the main documentation here at scroll - alcazaba oh you can also view it on github up here and so this year I the guide is going to show you how to do a lot of different things I'm not going to cover all them I'm going to cover just some of the basics that'll help you get up and running to do most of what you want essentially but there are a lot of different bells and whistles that you can't cool here on your own alright so the very first thing we're going to do is we're going to install it from a CDN which simply means we're going to copy and paste this line right here however you can install it via NPM if you have a more robust project obviously and I'll show you how to import it as such so I have a blank folder nothing in it I with Visual Studio code opened in it and we're just gonna get some an index.html here exclamation point hit enter for basic scaffolding and then link enter and we'll paste in a reference to a main folder with a know a CSS folder with a main dot CSS file in it we'll go ahead and create that folder called CSS and then a main dot sass file alright so if you add the sass extension here in Visual Studio code we can click watch sass on that file and a composite down to a CSS file which this is the file index is looking for and we'll go back here and at the bottom remember we have that line copied we're gonna paste it here right here so that gets our scroll out ready to rock in our HTML file so one thing I'm going to do here real quickly is I'm going to close that out and hit ctrl B I'm just gonna get some basic HTML it's gonna be very simple I don't want this to be the primary focus obviously so just we're gonna have section elements four of them an h1 element in each one of them so hey what's up and then a paragraph element so P enter and then we're gonna put lorem just to have some text some lorem ipsum text alright so by the way if you don't have access to these some of these I'm these these shortcuts you can install these these different plugins here for official studio code they're handy so I'm just gonna take this coffee tastes rather paste and there you go I'm not even going to bother changing these up to make them unique it's not relevant and then we're gonna head into our main dot sass file real quickly and I'm just going to copy and pay some rule sets in so the body an HTML element margin:0 padding:0 font:11px for that to import the font next we're going to start with the section element all I'm doing is setting the height to 100 viewers height and then also with hundred-percent padding 6 cm the box sizing the border box and this allows us so that we don't have to do any calendar width and then the color just setting to white and then we have two elements that are embedded inside of here the h1 and paragraph elements and let me come down here and close that off all right so we're just setting a bigger font size and a paragraph we're saying the width the 50% line height blah blah blah nothing very specific to what we're talking about here all right so now at this point we can go ahead and hit control B right click and open with live server alright and also there's one other area that I completely forgot in the the sass file here and that is this section so at the very bottom so we're just selecting each of the sect the four sections with the end of type function here background and we're just using the background here to set different background colors that contrasts well with each other so this is our our page you know a lot of landing pages are kind of structured in these different sections of sorts obviously mine's pretty ugly I didn't spend any time on it but a common use case obviously for your landing pages are you know you'll want to be able to scroll elements in or up or do something based on the scroll so let's go ahead and start working with scroll out so to get it working in the most basic fashion and it's very useful I'm probably gonna account for most of your use cases I it is very simple so let's go back here to index let's get rid of this welcome here and what we're going to do is we're going to it really we're only cry requires just three steps alright so the first is we're going to call our scroll out here so script and we simply call scroll out right there and then depending on which elements in your HTML that you want to suit you know the scroll animation behavior to occur then we attach a data - scroll attribute all right so to do that all we do is put in the attribute of on the element and attribute of data - scroll and you can do this multiple times based on multiple elements so I'll put one here maybe I'll put one here on the third section itself like that so I have one on the h1 and then on 3rd section itself right here then finally we have - I have defined some CSS for this alright so we specify the data scroll attribute like this all right and then inside of here we can add either key frame based animations with the animation CSS property or you can do transitions if you have simple ones so we'll just do transition and I'll say all I for a period of two seconds then next we're gonna have data - scroll equals in all right so the scrool out library makes it so that when an element is scrolled in we can attach specific CSS properties to it so we'll stay opacity 1 this means when it's actually scrolled into view so we're gonna bring it out of a pasady 0 in a second so transform also let's say if you also want to apply a transform to it I for the transition we're going to transition all obviously and we're going to transition the opacity so it's going to fade in and then we're gonna do some sort of transform in this case we're gonna do translate X and we'll stay zero right here so that's going to in terms of movement for translate on the horizontal axis we're going to copy this paste it this is going to change to out the opacity is going to be out or output zero and translate X will say negative 200 pixels all right so now at this point it should work so let's go ahead and give it a shot so I'm refresh in here look at that now the third concession container itself which we haven't yet scrolled to should also do that sort of same animation and yes it did and look it keeps on coming back as we transition in and out awesome awesome stuff so that right there is going to help you eye with a lot of different use cases we do have a lot of other options that we can attach to this though for controlling other parameters and other specifics so I one of those is let's say for instance we only want those animations to occur once all right well we simply open this up into an array or an object here and we'll say once true and by the way all the available options here if you want to scroll up if it's all the way down here at the bottom I was wrong about that it's actually up here there we go I we have our configuration options so these are all that you can use we're gonna just do once and threshold as an example here but you know at your own leisure look all these up and determine if what you want to do would be accomplished accomplished with by using one of these properties so I'm gonna do once true so now when we you save that and we go back and we refresh now watch when I go back up it should not occur again and it didn't and this won't occur again either awesome and then let's slide let's take that one off and let's add another one and we'll do threshold say 0.5 and threshold if we go back to the documentation because they'll be able to lay it out better for me simply means it's the ratio of the element that must be visible before it's marked as visible all right so what we'll do we'll say 50% of the element that we have attached the data scroll attribute to must be visible before it's marked as being in or before we attach that animation or whatever it's supposed to do so I a really good way to demonstrate this is it would be hard on the h1 element just because the h1 element IMATS is currently in the browser is very short very small in height so it would be hard to you know to see the effect we will however see the effect on this big section element because it's a hundred percent height of the viewport so let's save that and we'll go back and once again we come here we can't really tell the effect is again this is only so high but if we go here watch what happens normally this would have start coming in as it did previously even right here because this is actually where it begins but it's gonna we set it at 50% so there we go we're right at 50% right in that middle point and point once we scrolled to that position so obviously you can see there's a lot that you can do with this especially if you start getting into more complex CSS animations with keyframes and all of that good stuff and what's really great there's only one KB also if you go back to the guide I there are some other things that you can really integrate which I'm not going to really show here but you can use it with animate CSS so of course animate CSS is a very popular animation library that provides you with a lot of different ways to animate different things so bouncing if you you know on scrool you want these things to bounce in you can do that I bounced out just a ton of them if you view on github you'll see all of the class names so when it comes to using animate ICS I believe I covered this in a different tutorial a while ago but when it's very easy all you have to do is just import through the CDN this right here and in the head section and then all you have to do is attach a class of anime or bounce shake wobble whatever so it's yet to animate an element add the class animated now the way this works in relation to school out I you simply go to the guide here you simply adjust the scroll out method right here to this and this will add the animated class that's necessary to make the animations work so you would probably only add for instance I a class if you wanted to do this class Eagles bounce I believe bounce in was one of the available classes for it and then you would adjust that section down there so very easy of course you would import the animate the CSS link up there as well but yeah so hopefully I you know it's only one KB so it has something over salad @j s which is something I you know recovered last week or last month rather alright so hopefully you found that helpful make sure you subscribe here if you enjoyed it and answer today's question which is when building landing pages how often do you use scroll based animations all right I'll see you guys soon good bye [Music] [Music]

Channel: DesignCourse

Views: 50,609

Keywords: scroll activated animation, animate content on scroll, triggering css animations on scroll, how to trigger animation on scroll, scrolling animation, scroll based animation, html css and javascript scroll animation tutorial, scroll-out, sal, css scroll animations, scroll css, scrolling css, scroll animations, html css scroll, html css animations, css animations tutorial, css3 animation tutorial

Id: m-MpXGFKomE

Length: 15min 20sec (920 seconds)

Published: Tue Nov 06 2018