React Easy Slider with Framer Motion Tutorial

hello there by silly gooses in today's episode we are gonna create a little slider effect and react using framer motion so this was the most voted thing on the community post so we're gonna make it even though i made that in swelt in three minutes this looks six hours but look it's still cool wow there we go so we're gonna learn how to make this little slider animation but before we get into that i have a little announcement to make for you guys come here come here yes silly goose we just got engaged so right now there we go so right congratulations in the comments because we want nice messages okay so let's get going let's build out it's gonna be quite simple actually that's what i like to say to myself every two minutes i do something and react this is fine this is great this is easy so basically i just have an empty create react app here if you have no idea how to do this then all you need to do is open up terminal and say mpx create dash react app and then give it any name you want like i prefer smelt and then hit enter and that's going to generate your project with the folder name i prefer zvelt so in this case i did frame or drag um and after that to actually open up the servers and to see it on the screen you need to run mpm start so hit that along the flow hit that and there we go it takes a while to load up so it's gonna give you a nice intro screen so i'm gonna close this and open it up in chrome i need to change the default behavior of that and there we go wow super cool okay so we're just gonna kind of clean everything up and start off fresh so app.js that's our main component um which we're gonna just empty out so just grab everything in the header and just add like a h1 in here now it doesn't work because i need to switch my printer over to react very quickly so i'm going to do that and now h1 hello and hit save and look at that it updates perfect so another thing i'm going to do is go to app css and just remove all the styling from here did you hear that voice crack okay save perfect so there we go so let's get going so actually we need to close up the terminal and install one more thing which is framer motion which is probably one of the most popular animation libraries in react now again to do this carousel i mean there are other packages out there but i kind of wanted to explore kind of the dragging functionality a bit in frame or motion so that's why i did it this way so let's close this up and hit close perfect so all you need to do is say npm install framer motion like that i hit save then wait and wait and there we go so then we're going to run it again npm start to reopen this up and it should be there no that's not it that's lightroom okay close that up and everything should still be the same okay so uh just find a couple of pictures we'll see if i'll be lazy or not to upload these on github but i just have a folder with six pictures of uh pixels so let me show you actually the way i did it because it's quite simple i'm just gonna paste it here as assets okay all right so here's what you need to do to get pictures the right way in your uh just to make your life easier so if you go to pixels you can go to vertical but you don't just want to click and download and click and download because that's irresponsible what you need to do is actually pick the size here so if you go to custom and just enter 1280 by 1920 so that's going to give you a nice vertical 1080p image that way at least you know you download all of these it's going to be the same size and you're not going to have weird problems with images in your codes okay anyway let's go back here so what i'm going to do is get rid of this logo up here get rid of that perfect lovely okay so i'm just going to have basically i think just one component here which is going to be our carousel so i mean technically should i do it like this okay let's just add it here because it's really not that much code so i'm not even going to make a component but if you want to separate it later on feel free to do it so here's what we're going to do so up at the top here i'm going to import motion which is our little animation library from framer motion cool i also got them for these things called use ref use effect and use state now if you don't know what they are that's fine i'll tell you all about it in just a bit just import them for now so we have them here okay so the way basically this frame this library works is you take any elements of whether it's a div whether it's a h1 and you just pre-append motion on it and that is going to give you a bunch of little cool props to animate so for example on the h1 here right so if i just change this to motion dot h1 and let's change this to motion.h1 then in here now i can use something called animate and a bunch of other cool functionalities so i can set this equal to and say x50 so like move it down or move it to the right by 50. so if we do a refresh here as you can see bloop it slides let me exaggerate the motion a little bit i'll do 250 okay let's save so let's head back here and check this out wow wow okay so that's kind of the gist of it cool but that's basic we don't want basic we want complex code so what we're going to do is essentially make a div here i'm going to call this motion so let's call this motion div all right like that i'm going to give a class name to this class name set this equal to carousel like that cool that's all we need there and in here i'm going to add another one so motion div i'm going to tell you why we need two in here because it basically comes down to like how much you can drag uh the carousel around so that's why we need two in here but i'm gonna add background colors and everything so it's very clear and easy to understand so again we're to give this a class name of inner carousel like that okay perfect and that's pretty much it that's all we need what i want to do is actually just make a file a javascript file to add all the images so i can import them as an array so the way you want to do it because you don't want to go up here and do import image one from dot dot slash whatever it is like slash assets one dot jpeg right so that's one and then you'd have to do it like like that and that's not nice you want one little import one cute little import so the way you can do that is i'm just gonna go here to the source make a new file and call it images.js all right and what you do is say import image one here from dot dot slash assets is that the correct folder let's see yeah dot slash asset slash 1.jpg that's how i call them okay i'm going to copy this a couple more times i just need to change here this to 2 3 4 5 and 6. okay then we can go here as well and do 1 2 3 four five six okay and then all you need to do is just do a little export export default export default and you can add an array here and just add them in here one two three four and five and six and then and that's it that's all you need to do so now when you go back here and you do an import so if i say import images from dot slash images and if i do a little console luggy lock here and say images well that's gonna give you back at the radio silly inspect console oh yeah this is what you want to see okay cool cool um okay so now that we have our images well guess what we can do we can go here and do a little loopy loop around it so we can loop over them and then add like another div called item and we can just put the images in there so we don't have to do image blah blah blah blah blah okay so that's a loopy loop so curly brackets and then you do images down map and then in here you say image so that gives you the singular one okay cool and here you're gonna have to return some some beautiful looking jsx though we just love how jsx looks like so clean so clean okay so here we're returning a motion div alright so i'll just add another motion div in here close the sucker up and then here we'll have our little image and in the curly braces we can just add the source of the image all right because we're looping over each one and we want to output one motion div with an image for every single image image so we're going to give this a class let's go over to motion div give it the class name of item and that'll be it dow do okay what do we have shite okay cool so now let's add a little bit of css i'm not going to use modules i'm not going to use style components we're going to do it the simple way okay which is global styles not preferred but we're going to do global styles wouldn't that be nice to just add the style in here and do your styling yes well head over to zveld so let's go over to app css i'm just gonna just grab the h1 here so do you have a i don't even have a h1 okay never mind i removed the title get rid of that what we're going to do is grab the carousel okay so this is the outer div and we're not going to do anything to it be patient yes silly goose i'm going to grab item which is the image container i'm going to add a min height of 40 ram to it and a width of let's see 33 and padding of 40 pixels okay just a little bit of styling like it's still going to be big like that because i need to get the actual item image like that and add a width of 100 to it height of 100 and box and that's it let's see there we go all right so essentially what we did was this is the container for the image and then we just set the image to match whatever the height here is and with let's change it to something else 30 round keep this consistent keep the consistent size is that too small no that looks cute that looks cute okay so there we go that's what we need there and then let's add this pretty little border radius to it there we go and that's that cool so now let's grab the inner carousel all right this is where all of our items are in and add a little display flex cool so that should put them vertically horizontally there we go that's cool very very cool now what i want to do let me just add the background color to these so go back here so the inner carousel right background light blue come on update there we go now if you remember we also have a parent so we have inner carousel this is where we added background color blue but we also have carousel on the outside so let's grab that as well carousel all right and what we need to do for this one is i'm just gonna add a cursor grab to make it look grabbable like that so that's cool and what else i'm gonna do is i'm gonna add a overflow hidden to this because essentially what i want is for the parent div to like cut off here right now it's not going to do at the end which is all fine what else i want to do is add a bit the margin to to the page so let's go over to index css and in here i'm just going to go here and just do margin 0 and 20 so this can add 20 left and 20 right so it's going to put that bloop in there like that cool very cool all right now these images look very stretched they don't look nice but it's okay we're gonna fix them so what i need to do actually here let's go over to the width here let's add a min width of 30 ram and there we go so now it as you can see it stretches out and it leaves the container uh if i remove the overflow hidden from the carousel you're gonna see what's going on so as you can see it overflows that way cool so let's add it back i'm also going to add a background color of something else to the carousel so let's go like a pinkish orangish color perfect save okay cool so that's all sorted so now we can hook up the functionality we can add a little margin i'm just going to add a little margin on top and bottom just to bring this down a bit just because i don't have content so let's do 10 there okay there we go that's much better cool so here's what we need to do my children what we want to do is essentially add drag to to this container here so the inner container here because we want to keep this outer one not moving at all and you want to only move the inner one right because the outer one is overflowing right all the elements inside are overflowing so when we move this inner container well it's gonna stop it from popping out on this side so that's why we need two of them so let me just show you once we hook this up a little bit you're gonna see so all you need to do is go to your inner carousel here and just add a drag to it now you can customize it you can do x or y or both we just need x which is left and right so if i drag now now i cannot do it on the images because it grabs the images we can do like a little pointer events none on it if you want to but there we go that works so let me let me just go back here we can go over to let's just go over to index.css and add a just just do a little pointer events of none here just so it goes true so there we go so now yeah i can i can just grab this so as you can see the blue part represents our our inner div and the red part is the full on big carousel so inner carousel outer carousel so as you can see i can just drag this along like that and it's all fine and dandy okay the problem is though there's no constraints so i can just drag drag drag and it's gonna go all the way to the end and okay so what do we need to do well we need to add constraints um so drag x that's one right and then we need a drag constraints now here it gets a bit tricky because we need to calculate like how much we need to go left and right because i can do right and say zero that's obvious all right so that's the max i want to go to i don't want to go more than this because there's no content on this side so there we go so just add right zero now it also has a little bounce animation too so that's nice so once it gets dragged to the max boom look at that that's pretty cool lovely but on this side it's a problem now how do we fix this well the thing is we it's quite tricky because you cannot just get the width of this whole thing right all the way to where the images stretch because if you do that then you end up adding the constraint at the end of that so it actually finishes there after the content is not showing up on the screen anymore so i'm gonna show you but we're gonna work our way around it so if it doesn't make any sense don't worry i'm going to show you just now so what we need to do is create a state which is going to be our width that we need to scroll okay so the way you do that is go up here const and in square brackets and width and set width and set that equal to use state and i'm going to start off with zero okay so that's cool and then what we need to do is grab the width of this of the parent carousel right this one um because the inner one is just the size of what we see on the screen whereas the the carousel itself is just overflowing so it's actually much longer than that okay so to grab that what you need to do is use this use ref so with use wrap you can actually just grab the element and get a bunch of info off of it so if you want to get the width if you want to um it's kind of like a query selector in javascript and vanilla javascript if you will so it's quite easy you just say cons carousel so create a variable set the equal to use ref so this little method that we uh imported this little function so what you need to do is just go to the element you want to grab and just add ref equal to and the name you gave it which is carousel okay and that's it um and this used effect basically uh can be used in a lot of different ways but essentially if we just run a function like this and add an empty empty what is this array it basically runs when the component gets mounted on the screen so when it renders out this function is going to run so what i want to do here is just do a little console log and i'm just going to say carousel again just to show you kind of what we get back from this so if i go to inspect and just head over to console okay we have an error here with the unique prop so let me just go here we can just add the key of the actual source of the images that's going to be fine just add that and that's going to get rid of it so here we go so we got back an object with the current of div carousel cool so to access it again we have that dot current here hit save and there we go we have our actual carousel cool okay so let me show you what i mean so if i go here to elements open up the body and just scroll this a bit i'm gonna open this up all the way there we go so check this out so if i scroll here it's gonna say translate zero okay if i scroll scroll so we essentially want to stop it here right which is around minus 2200 pixels all right but if i get the width of this you're gonna see if i do a scroll width all right so that's going to give you the full size of the width it's a thousand one hundred all right so that does not match up in any way or if i do let's see let me do a refresh of it actually there we go let's open this up app open this up so scroll scroll scroll scroll so it ends yeah minus 2200 or so and here we go now it's correct i don't know why it showed up like that um i think i resized it that's why so it's 300 right um so essentially if you add that value to the constraints that's going to be 300 it's going to go all the way basically till the content is off screen like that see 3 300 that's exactly off screen so essentially what you want to do is grab that which is fine we did so grab the full width of it 300 3 000 300 was i saying and the duct the size that's currently showing up on the screen right so the full width minus what's showing up on the screen and then that's gonna give you the value that still basically needs to be dragged all right so i hope that kind of makes sense so full width minus what's showing up on the screen is gonna give you what's left over okay so the way you can do that is so scroll with is going to give you the full one and if you do carousel dot current dot offset width so this is going to give you basically what's on the screen the width of what's on the screen so full one three thousand three hundred and one thousand one hundred is uh what's showing up here so now if you do a little subtraction here a little minus minus so this minus that well oh yeah look at that that's two thousand 2 700-ish or whatever it was that we needed to scroll so if you go all the way here ugh i lost it okay i was there i promise here we go so if i go there open this up and look at that 2200 whatever okay cool so now with that logic what we can do is since we have these two we can go in here and set with so we're setting the the state this piece of state that we have here to carousel the current the scroll width minus carousel carousel the current the offset width and that's going to give us the final result cool so now what we can do is just go down here so we have a cons drag constraint right and then we can just do a left and we can add minus with because it needs to be minus otherwise it goes the other way around so we just add our little state in there we can remove this console log we don't need it and that's that's gonna do it my children that should work quite well so let's do a refresh okay drag this way nice let's go drag that way and look at that that works just nice perfect how cool is that little slidey slide now one thing i want to do is when i hold down my mouse i want this to look like it's grabbing it ooh that's exciting how do we do that easy we go up here while tap set the equal to grabbing and hit save let's go back and look at that it's not doing it why is it not doing it grabbing cursor i need that cursor i'm such a silly goose cursor grabbing ah and i need double curly brackets wow save as a grabable look at that it's grabbing it now cool so now we can go back here get rid of these rgbs and we are done hit save how easy was that that's not what we said when we built out the project a couple of hours ago but look at that looks fancy doesn't it you want to see it in zveldt because they built it out you don't want to see it because then you're you're you're you'd then you're not going to want to build it out and react anymore okay that's it for me thank you so much for watching we're engaged life is good i'm gonna order some fast food for the whole family okay get the courses of development.com and i'll see you maybe on friday goodbye

Channel: developedbyed

Views: 150,779

Keywords: react, web development, react tutorial, react animation, framer motion, react framer motion, react js, dev ed, developedbyed

Id: W0bEL93tt4k

Length: 26min 28sec (1588 seconds)

Published: Tue Feb 01 2022