This Horizontal Scroller is So Satisfying

Key Takeaways

I came across this really cool example of the horizontal scrolling layout where elements are being skewed based on the velocity of the scroll so lucky for you I figured out how to do it and it's not that hard with the use of gsap or the green stock animation platform and their scroll trigger plugin so let's get started if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alright so here we go with the project um as we could see there's just pretty much an empty index.html I'm going to put link and CSS Main dot CSS as we can see we also have a file up over here as a main SAS file and I am currently watching that so you want to make sure you have the live SAS compiler with that going it's empty as you can currently see we also I we're going to start it with the HTML so the HTML I'm probably just going to paste in some of these and I'll just I the rule sets are not the oral sets rather but rather the HTML elements and then just describe them as I go so the first one is going to be a scroll wrapper and the purpose of this element right here is going to contain everything and also we're going to place over overflow x hidden in CSS so that there's no horizontal scroll bar if you try leaving this out in the context of this project you'll see a horizontal scroll bar next up we're going to have a section element inside of that if I could type there we go and then inside of that we're going to have an H1 element that just says gallery all right this will be position fixed by the way um and it'll stay position fixed essentially regardless of the scroll position um you can choose to add this or not and then we're going to have an actual scroll container all right and then inside of that we're gonna have a slide we're gonna have three different slides and I will simply paste the first one in just to describe it real quickly and this is simply a class of slide and then we're going to have a div class of SKU group and then Gallery right here so what essentially this is doing is I the skew group this means anything that's placed inside of this element right here so any of these elements like here here and here will have the SKU effect applied to it so you could put anything in this case I'm putting four Images you could put any other HTML element you could put type and it will skew as well the other Gallery uh class right here that's just for other styling purposes so you'll see in the CSS in a minute how that works and so what I'm going to do now is simply take the div class slide and we're going to paste it in oopsie I hit the wrong key there we go two more times so this gives us three slides each slide is going to consume basically 100 viewport width so we'll have one two and then three all right and that's it for the HTML or the HTML and then the CSS again very straightforward we're just going to use here uh zoom up a bit uh a body of font family pop-ins um this should be Sans serif rather and then margin zero height 100 viewport height simple enough then we're gonna go ahead and put in two more roll sets real quickly our H1 this is just getting position fixed in the font size and margin up and then also our scroll wrapper is going to be overflow x hidden to get rid of that scroll bar additionally we're going to have our Gallery so we have a gallery class and again that's right here on each of the div class Q groups and that's just going to be a display Flex a gap of 6m between each individual image and then the image right here we're setting an aspect ratio to make sure they're always a square and then just making width 20 here in the context of this project um because I wanted them to be smaller after that we're going to go ahead and also put in the last rule set which has a couple nested rule sets and that's going to be the section element so remember the section element is if I right here this entire thing right here we're styling the section with a height of 100 viewport height and overflow hidden and then we have a scroll container which is the parent element that has our three slides inside of it so that has a height of 100 viewport height now this part's real important the width of 300 viewport width we're just putting that in manually because we know we have three different slides so then we have a flex Direction a reflex display Flex rather a flex Direction a row overflow x hidden as well here and then we also have down here a div and wait a second let's make sure yeah okay so this is selecting each slide I was wondering it's like why don't we put slide there we can just put slide here as well if you wanted to and then each one of those slides has a hundred viewport height 100 viewport width a display Flex justify content Center aligned item Center that centers all the images inside of it so very straightforward if I go ahead right click open with live server we'll check what this looks like on the browser and here is this is what it looks like um right now we only see the first slide in the four images inside of it I because we have no way to scroll right now to see the other ones so now we're going to go ahead and switch to JavaScript and we have to import um some libraries first so the first one we're going to import here is I want to use smooth scroll on this and right now the best smooth scroll Library out there in my opinion is lennis all right so if you type in lennis Moose girl in Google you'll find that and you'll see how we'll go ahead and integrate that in a second we also have to include gsap which is the green sock animation platform if you just type in gsap 3 CDN in Google you'll find the first result and you can just grab this code here or just obviously click on the top link YouTube's description to get access to this code and then finally we also have to import the scroll trigger plugin which is a part of the green sock animation platform family and this allows us to use this in Define scroll triggers after that we're going to go ahead and open up a script tag to write in our JavaScript okay a lot of talking there so the first thing that we're going to do is we're going to register this uh the scroll trigger plugin so because it's an it's an external library that we import we have to register it right here in order just for us to even work with it then we're going to go ahead and say let slides equals gsap utilities or utils to array and we say slide now essentially we're just selecting all the elements within the class of slide and converting them which is a node list in JavaScript to an array and then this allows us to perform array operations on the slides later in the code all right next up after that we're going to go ahead and Define a gstap 2 property so we're going to store this in a variable called scroll tween equals gstap2 we're going to take the slides defined in the line above and then we're going to open it up in parentheses here inside of an object so inside here we're actually going to put in what the code is suggesting uh pretty much so X percent is going to be negative 100 multiply that by slides.length minus one what the heck is that doing you might be wondering so essentially it's creating an animation that will move the slides horizontally because we want a horizontal slider and then the next part of this right here is simply calculating the total amount of movement needed necessary to move through all the slides okay after that we're going to specify ease none we don't need easing we're kind of going to let lennis control the the smooth scrolling ease using essentially for us and then we Define a scroll trigger right here so scroll trigger and then we open this up here in an object all right so now we have to Define an actual trigger for the uh the the this section so the trigger is going to be the parent container that's wrapping around almost all this which is the section element all right we could probably use the scroll wrapper element as well but section will work just as well um outside of that we're going to put pin true now if you remove this line I scroll will not work all right so just re just remind yourself that you have to have that pin true in order for it to work so what it typically does it's going to pin the trigger element in place causing it to stay stationary while the rest of the content moves um after that we're going to have a scrub property you're such a scrub uh of 0.1 so for the scrub property it makes the animation follow the scroll position if that makes sense um and the number 0.1 is the lag of the animation behind the actual scroll position so if you try screwing around with this number it will greatly affect and probably break the intended uh result so then finally we're going to put an n and the end is actually a really interesting property um if I put plus equals and then we put say 3000 I it's going to do to essentially act as a velocity control like how fast it will it move through all of the slides that we have uh like how much do you have to use your mouse scroll will in order to get through all of them I and so we'll play around with this number so you can see the actual effects now finally we're going to type into something called a method called on update and then we're going to say self and this is a function that will run every time that the scroll position updates so whenever you're dragging the scroll bar or you're using your mouse scroll wheel this thing fires essentially so after that we're going to go ahead and Define a property called let and this is going to be called SKU amount equals self so self means this is information that's passed in as a part of this method right here and that is going to be um called get velocity so get velocity is basically return by scroll trigger plugin that allows you to see how fast things are being you know scrolled through essentially and then we apply a little bit of division on that and that will help us determine how much skew is going to occur occur based on the velocity so the I believe it's the the higher the number the less skew occurs the lower the number you're going to see massive skew you don't want too much because it'll look ridiculous all right after that we're going to also integrate a scale amount but we're not going to integrate that just yet I want to Define it though so scale them out right here and because we're going to grow each uh element inside of the skew group as well so it's going to skew and grow at the same time I and so what that'll be is one plus math dot ABS self dot get velocity once again and then we divide that by 20 000 or so all right so that's a little bit confusing so what it's doing essentially is taking the scroll velocity and using it to to calculate the scale amount so this number right here if you play with it then I it will affect how much the items scale up based on uh the velocity as well so we could play around with that value as well I believe the higher the number the less it is scaled the lower number it'll be like it'll go like crazy so just just keep that in mind then what we do is we take slides all right which is our array right up here and we say for each we pass in the slide so this gives us each individual slide inside of here that we can then do something and animate stuff with so what's really cool about green sock is we it it gives us a skew X property right here instead of us having to put tie in the individual CSS properties natively so skew X is going to be set to skew amount all right that's simple enough actually you know what I just screwed up let's back up right there actually let's copy that let's copy this line that way we have to write it again we have to put gstap two there we go so then what we do is we're going to do a slide dot query selector and skew group all right so what that does is we have to we take our slides for each we grab the eat we have access now to each individual slide right there in that line and then right here we say gsap2 because we want to animate the slide query selector SKU group all right so anything that's inside of the SKU group is going to going to be animated inside of this line then we take skew X skew amount so uh we're gonna do scale but we're not going to integrate that right away all right so we'll come back to that we're gonna have another property called overwrite and that's true and essentially what it does is making sure that each uh a new animation immediately immediately replaces any existing animations on the same property uh because remember this is firing uh very fast and then also we're going to specify uh and ease so we'll just do power one out okay that looks good now let's go ahead and see what happens if we try to run this I'm going to go ahead and open this okay so it kind of works all right but not really it's not resetting back to its original size or the the original skew which is zero so we can tie into another method here and this is going to be on scrub complete all right so this function essentially will run when the user stops the scrolling all right so when we do that I what we want to do is run through the slides for each we take the slide just as this was suggesting and we're going to leave that there so the first line is gsap2 slide query selector SKU group that's going to be Q X is zero I we want to also make sure that here you don't have to put overwrite true in this case um we can specify a duration of 0.5 for once the scroll is stopped and it reverts back to its original state uh ease power one out is fine as well and that should be good right there so let's go ahead and go back now sometimes when you refresh it acts kind of wonky like that all right so it's kind of working here but we haven't yet integrated this smooth scroll from lennis because remember up here we're importing it but we're not yet using it and if you go to lennis documentation they show you a very simple way to to get it up and running so if I come back here let's go to check it out in GitHub it provides you with the minimal setup right here under setup so if we take this smooth scroll and we paste that in we'll save it all right check that out it's just much more smooth I really like the lennis smooth scroll Library all right so what if we also wanted to enlarge each one of these while it's it's screwing like the original effect so essentially what we do it's actually really easy we already defined the property and that property skew amount right here so if we just take scale and I'm going to do a scale y on this instead of scale entirely because otherwise they overlap each other when they're growing out and you can experiment if you want and then we just put scale them out here and then when it's finished we reset the scale y to one which is the default size so let's try it now let's go back all right and there we go awesome awesome stuff scroll trigger and the green stock animation platform makes doing stuff like this relatively easy just with a little bit of JavaScript if you're interested in this sort of thing definitely check out designcores.com forward slash AF or the upcoming Advanced front ends course where we're going to cover everything from scratch I with green stock animation platform some 3js as well in order to create really cool interactive projects like this alright everybody hope you enjoyed that and I'll see you soon goodbye