Creating Awesome UI's that Animate Only On Scroll

today you're going to learn how to do this and you can see that the scroll completely affects the animation 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 CSS animations from 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 then you get the first two months free alright so let's get started hey everyone what's up Gary Simon of course zetro so today we're going to be i continuing on the g sap road so the last two weeks i've covered a g sap which is the green sock animation platform it's been around for quite a while I did two videos one on twee max and also on timeline max I should probably definitely check those out first before watching this because we're gonna take G SAP in conjunction with scroll magic which is a scroll animation sort of library and the to work together really seamlessly all right so let's I'm going to describe what's happening over here from the example that we're going to create by the way this is on code pen so I'm going to put the link here in the description and you can use it right now and check it out so when we scroll down we're gonna see this animation take place and there's actually two different types of animations so the first one starts right here in this box and you can notice that it animates even based on the fact that I'm not continuing to scroll so I take my my pointer off the scroll and it will animate based on I'm how I structured that animation regardless all right so I that's the one of the timelines the other timeline does require me to keep on scrolling all right and I do match it throughout this tutorial that this is one of those things where you probably shouldn't overuse too much but I wanted to show you just for demonstration purposes and for teaching purposes as well but please don't overuse this when it comes to this scroll type animations that rely on the user to scroll you want to use those for secondary elements that aren't important like this eye but nonetheless I wanted to show you how to do it all right very cool so for today's suggestion share with us any amazing examples of scroll based animations from around the web that you're aware of all right if it Flags it a spam I will allow it to be shown of course since you're gonna be linking us all right so make sure you subscribe if you haven't yet and let's get started alright so I'm doing something a little bit different here I'm using a code pen and I'm starting a new pen here you can you guys can let me know what you think about that I'm usually using Visual Studio code but I think this might be a little bit easier I can kill two birds with one stone the pen will be ready by the time I'm done and I'll make that public and everybody can use it and yeah so the first thing we'll do I'm going to go to a change view and we're going to edit the the editor layout so that my three things on the right that way I'm situated over here and I'm not over the code or anything so the first part we're gonna start with I'm not going to import any JavaScript yet we're just going to start with HTML and then we'll work into CSS and then we'll use javascript at the end alright so the HTML as always is very simple I'm just gonna tab that in there and I have autocomplete enabled in my settings by the way that way I can do that and I'm just going to put an h1 scroll down very easy now let's put in another section and this time it's gonna have a class of sticky name what yours whatever you want this parts important it's going to allow us to define this as a pin in the container that our animation is inside and then we're going to use a block quote here and I'm going to just put in you should totally subscribe to my channel now alright and that's definitely true you should if you haven't and I I'm also going to put into two images and these images I have hosted here and the assets of code pen I'm gonna just paste them in right here you can grab these from the code pen which is in the description of course these are completely free to use images so use them if you wish and then also we're gonna have a div with an ID of box and this is just for later on I'm going to show you how to do something different with a second time line all right and then finally let's just copy this right here and this is last bit of HTML so scroll up alright looks fantastic doesn't it no it doesn't at all alright so that's why CSS is now going to come into play so I the CSS by the way we can change this here so that if we go to settings and we go to CSS we can choose sass right here save and close all right I'm not really going to use too many stats features except just nesting the rule sets inside each other so I the first thing I'm going to do is import just a a font it's actually not montserrat as I always use it's a it's a serif font called Arup a I think that's how it's pronounced probably not and then body we're gonna say oh by the way I just need to make things a little bit bigger it's kind of small isn't it alright so body we're gonna say margin:0 to get any default margin off there font family will say is air pay alright and then also our h1 inside I body will be font size of 2m text-align:center none of this part stuffs important really this has nothing to do with the main stuff just yet there we go alright and then also we'll have our section and we'll say padding is 3m height is a hundred point a hundred view port Heights and then position:relative and box-sizing is border-box and that's I to deal with the fact that we're adding padding here so that it doesn't give us unnecessary scroll all right so that's looking more consistent almost all so we'll go ahead and put in our block quote the block code will say font size is 2 e m let's scroll down here that's this part and then we'll also say a width of 30% a margin top of 17% and position is absolute all right nasty all right after that we're gonna have inside of here and I forgot the span element by the way let's do that real quick I'm just gonna put empty span tags here now I could have done this with the after selector and I chose not to do that because I wanted to be able to aim and animate it specifically with G SAP so you'll see how that comes into play in a little bit so span will say is width of a hundred percent and this is just a box really background I let's see here red it's not really a box it's a really it's kind of like a border that goes underneath the text will say display block the height is only five pixels and margin top will be 20 pixels all right so that's this thing right here all right and then also coming down here will say image both will be position:absolute and then also will say image I enth of type so it's going to select the first image element and then width will be 40% right is going to be zero and top is 20% all right copy this and we'll say to this width will be smaller so 25% right will be about 40% by the way I'm not making this responsive so if you wanted to make it responsive you would just add in your media queries making it responsive for these type of tutorials just this die it adds more unnecessary time and it's not the purpose of this tutorial so alright let's see what else we have here we're gonna change these sections to a light grey just to differentiate the three sections from each other so to do that we'll go ahead and come out of here so we'll just say section ant child we'll say odd so it'll select the first and third background and there we go very light grey awesome alright and then also let's see what else we have here um we will do a percentage I actually know we're gonna take our box element I think we'll add that at the end that I'm referring to this div id of box right here we'll do that later alright so for now this is I pretty much okay and it's gonna adjust slightly based on what we do in the JavaScript section which is now what we're gonna focus on so the very first thing we will do is I will go up to our settings will go to JavaScript and right down here we need to import a number of different scripts so these are all in the code pen that I'm working on now so you can just check that out if you don't want to sit here having to type all this by the way for this between Macs I you know just go to google and type tween max CDN and you'll find all these we also need time line max we're going to add another resource I of scroll magic all right we're also going to add another one which is the scroll magic G SAP animation plug-in right here so if you just do too to Google searches for scroll Magic's CBN you're gonna find both of these links and then for G SAP CDN you'll find these two CDN lakes from CloudFlare all right and that's all we need here so we'll save and close and then I alright so for our JavaScript we're going like I said we're gonna have two timelines but let's just start with the one where we want the animations not to be based on time but to be based on scroll position all right so that one will look like this so we'll save our TL equals new timeline Max and this time we're going to pass in on update but a function called update percentage if I could type there we go all right and you'll see how this comes into play when we we create this function in a bit we're also going to create a controller for our scroll magic so cons controller equals new scroll magic controller all right okay so I now what we'll do is we're just going to create one little simple animation so we're gonna say timeline which is defined up here and dot from we could use to or we're from I but if we want something that's like coming from like an opacity of zero or something we can define it here instead of defining into CSS I so we'll put in I let's see we'll do a block load block quote there we go and then what we'll say is the block quote why the duration of this will be 0.5 seconds so half a second and then also we'll say X or on the horizontal access it will be 200 pixels and the opacity B will be 0 so it's going to come from 200 200 pixels from its original starting default I right here so it'll be like over here 200 pixels and then opacity zero so it's gonna fade in and to the left alright so we'll just save that right there and we're gonna add more to this to this animation sequence but let's get on to the next part so now we have to create the curl the screw up magic scene so Conte scene equals new scroll Magic dot scene alright so we're gonna have a trigger element the trigger element will be sticky which is the reference to right here let's see right here this section so once this section comes in this is the the trigger element alright so let's come back up and we'll say trigger element that's camelcase here sticky alright we're also going to have a trigger hook and this is especially important if you want to have this but your animation is based on the act the active scroll position as opposed to time so we're gonna say on leave and this is all specific to scroll magic and is this also accepts two other parameters of on enter on leave and on center I believe you could check that out in the documentation and also duration we can add optionally all right we could say the default would be a hundred percent but if we increase the to this to two hundred percent you'll see how this works by default I'm just gonna leave it at 100 percent and then we'll experiment with that momentarily so then we're gonna add on methods here called set pin so this is going to make it I it's going to pin or position fixed essentially that sticky container right here so and this is kind of nice to kind of encase the design make sure that the the this section isn't just actively and the the subsequent animations are just scrolling up we can remove that and by the way and I'll show you just by example so sticky right here we pass in also will say set tween and this is obviously important to our timeline max instant and finally we're gonna add all this to controller which is our constant right here alright finally we have our function of update percentage and we simply call our timeline progress method so function update percentage and we call TLRs we could also console.log that to see what exactly is happening there all right so I there we go as we can see we've only applied that simple animation on to let's get this out here just this point this side this blockquote right here now if I get out the console we can see all these numbers here and that's the console log of t/l progress and you can see every time we scroll it's letting us know the percentage we can see it's by 0.59 which is 59% we're 59% I threw this scroll all the way to 100 and then it allows us to keep going and it unpinned oh and by the way I can see this is an update to white so I'm going to change or add a roll set real quickly to make the sticky background white so let's just put sticky here in the CSS what am i doing sticky and then we'll say background is white a lot an important flag just to make sure there we go all right there we go and you can see obviously when we you know come from the bottom it's growing all the way up and you can see it stops immediately once the screw so this is one of those things where you probably don't want to have too many elements that rely on scrolling and for the animations to take place but I really wanted to show just several examples so let's keep on adding on to this and make these animate and we'll create a second timeline where it's an animation that's triggered based on a defined trigger occurring in the Dom but the animation will continue regardless of whether or not we're scrolling and I would say that's probably the one you want to stick with the most you know like I said you don't want to have too many animates that rely on the user having Anna scroll because you don't know how people are gonna scroll in it would suck if they just stop right here and they're like what the hell's going on they don't realize what's happening so that can result in a bad user experience all right so let's keep on going here talking too much and let's also add I let's see here for our timeline we can also take let's see here let's do I the images here so TL let's say from and we're gonna do we'll do the office which is the ID attached to the first office picture we'll say the duration of this will be one second so it'd be longer than the blockquote and we'll say the properties will be width no it's going to be X sorry about that we'll say negative 200 so it's going to come from the option you get the opposite direction of the blockquote and then we'll say opacity will be zero and that looks good let's take this as well with the building which is the second image and we'll say that's one and this will come from positive 200 with an opacity of zero and let's give this a shot oh right really the fact that I have this browser zoomed up quite a bit is kind of screwing up the weight it was kind of meant to look more like that let me hit plus here okay very cool as you can see it's very easy to add any type of animations really you can animate just about any CSS property let's also work in another one so this span right here right now it's not animating at all it's simply animating along with the blockquote let's make this be kind of like a progress bar so here's how we can do that we're gonna add one right here and we're gonna reference a span element it's a span and our span element will say will last one second or rather it's not really based on seconds because we're using the scroll as a default but really this will last the entire duration of the scroll if that makes sense all right so this next one will say with width rather will be zero and then we're gonna add in a delay and we're gonna put in parentheses equals and then minus 0.5 so this will start at the very beginning of the animation and it's gonna last through without the entire animation so this thing right here this red the red little thing underlined underneath the block quote should last the entire duration of the scroll all right so let's try that and it doesn't alright what did I do wrong you can notice it ends right there okay so I went a couple values that I left out let me hit plus on this makes a little bit large larger is right here we're also going to add in right here in order for this to work is equal will make this start negative one and this one will be negative 0.7 all right so let's give this a shot there we go so notice if you look right here they're from with zero and all the way so as you can see when you use that delay parameter with which you could use enjoy and other plus or negative values you can really control how long certain animations are occurring all right awesome now let's talk about four it's now right now all three of these little animations they read or really there's four of them they rely on the scroll or in the user to scroll through to see all of it right like I said that should be used sparingly and probably not how I'm using it like right here instead what if we wanted to make it so that when a certain point is scrolled two or a certain element comes in to view or a trigger element I then it will it will create an animation that will once it's in view it will run the full length of in the duration of the animation that we defined so let's do that real quick alright so we're gonna come up here we're going to create another timeline and this time we don't have to update I this is not a scroll based animation so we're going to omit that and call this T l2 for timeline too and then we're gonna define another tl2 down here or timeline animation and we're gonna say from box and this by the way is in reference to right here div ID box and right here we'll say it'll be one so it'll last the entire duration or for one second rather this time we'll say it's going to come from opacity of zero and a scale of zero as well and we'll leave it right there for now we'll add another step afterwards and then we'll also create another scene down here so make things larger for us we'll say can't seen two equals new scroll magic dot scene and this is going to be a simple it's going to be a more simple example isn't it can require as much code I all we have to do is create a trigger element or define a circular element here and we'll say blockquote is to trigger element so that's right here just a few elements above it and then inside our outside of there we don't have to put in the duration or anything which by the way I forgot to demonstrate what that does we will in a second we're gonna say set between again TL - this time and then we're going to once again add two and then controller alright where did I screw up unexpected token up there we go what is happening here okay I need to admit those there we go sorry about that had too many semicolons hanging around alright so now let's give this a shot and see what happens all right I didn't define the CSS that's why we're not seeing it at all so let me get the box CSS down here that's all right there we go we'll say um we'll start off with a width of 100 pixels height as well position will be absolute border will be 5 pixels solid and light gray I will do a margin of auto and then the top of 0 left this is going to Center it by the way bottom 0 and right 0 alright so there it is in the center there so now watch what happens so we scroll down I'm just gonna do it enough so that it activates the animation you can see that I let go of the scrollbar and it's still going to animate animate the box right here see there we go and that's based on this there's a right here is the block quote that we can't see because it's at a pasady 0 but now everything else is showing up based on the scroll it also obviously animates out as well okay so let's continue on real quickly just to wrap this up so for the JavaScript we're going to come down here and we'll say let's see here so just having that box that there in the center is kind of stupid looking so I what I'll do is add in another so let's just copy this real quick and we'll say from and this will be 0.5 so this second step of this animation based on the box going to move it over a little bit quicker we're gonna say this time for the properties this time let's just open it up so it's a little bit easier to read we'll put in left 20% scale we'll put in 1.3 and of course I these values I didn't just come up with out of nowhere it's based on experimenting trying to get the position correct so yeah border color by the way if there's if you're referencing CSS properties in JavaScript you do it this way technically it looks like this in CSS but when it comes to JavaScript and you're referencing CSS properties it's just camel case so border color will say is white so we're going to transform or animate the border color from light gray to white alright and then we're also going to add a border width and we'll say 12 so we're gonna thicken up this white sort of it'll create a negative space effect over the photographs and then finally box shadow I kind of wanted to be able to see the full portion of the box outside of the images on the white background so I'm adding a box shadow here so one pixels one pixel zero pixels zero pixels rgba and then we'll say zero zero zero which is all black and then for a pasady only nine percent so it's five point zero nine and then we'll high let's see here yeah that looks good yeah right there's good alright so should he animate all these as well let's check that out in the browser oh no that's not supposed to help I know why that's because this just should be too so a from in a two there we go so you can see the very subtle 1 pixel border right there and it just gives you kind of an interesting sort of animation but really the whole point is just to show that you can mix these types of animations with the scroll based animations as well but again like I said even right there if the user stops that's like well what what is this so I'm this is probably a bad example in terms of user experience but really it's not meant to be a prime example of probably how you should do things but this is just one way that you could so really when it comes to these I scroll based animations I can't emphasize this enough that it should only be on placed on elements um that really are just secondary or an afterthought so I there's definitely examples where you can see G SAP websites are that websites that were really created with you know very solid examples of websites that were created with gzip that do this in a correct manner so that you're not screwing up the user experience by doing things that rely too much on scroll position all right so hopefully you found that useful make sure you subscribe if you enjoyed and answer and not rather answer but I share with us any amazing examples of scroll based animations from around the web alright I'll see you guys soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 225,056

Keywords: UI ANIMATION, animate on scroll, javascript animation, greensock, greensock tutorial, gsap tutorial, scrollmagic tutorial, gsap scrollmagic, gsap, timelinemax, timelinemax tutorial, animation, website animation, user experience design, user experience

Id: S18Wh9IELo0

Length: 31min 14sec (1874 seconds)

Published: Mon Nov 26 2018