Awesome Filtering Animation with React Tutorial

hello there my silly gooses on the internet in today's episode we are gonna create a little filter animation system using react so it's gonna be quite simple uh but it looks really cool so i wanted to show you um yeah we're going on this framer motion journey a little bit um so here we go we just have like a list of cards kind of like what we did in the previous tutorials and would swell and react but the cool part is once we click on these see we got a cool animation so this is basically a grid a css grid and once we click on these it filters out all the movies based on their categories now i just added three buttons here but you can do more also this video is 30 fps so it's not going to look as smooth on on the video as it's gonna be on your device unless you have some weird monitor that does 30 fps which in that case i'm sorry for you but that's okay so let's move on okay so i just did a create react app if you don't know how to do that i'm gonna show you again so open up the terminal create sorry it's mpx create react app like that and then you do whatever name you want this folder to be and that's going to be it so once you have that we also are going to install npm install framer motion so this is the animation package that we're going to use to achieve that and that's that so once that's done cool so i did an update we're gonna run npm start to open up the development of the servers here we go so i'm gonna copy this over i still haven't switched it from um edge to chrome like the default browser but anyway so here we go this is what we have we have a nice clean uh project ready to go okay so let's open up let's get rid of some files here uh we'll probably keep most most of the things here we'll just go over to app.js because i do want to make this quite quick and easy and we're just going to get rid of everything in here and we're going to keep the main div which we're going to call just add a h1 in here let me do my formatting here switch it over to react so let's switch it over to react and then just add the h1 saying hello cool i'm gonna remove this logo thing because we don't need that and hit save so let's take a look now there we go we have hello cool now it's centered in the middle whatever it's all right that's fine so what we're gonna do is we're gonna use the same api we used in the previous tutorial so if you don't know which one it is it's this one i'm just going to copy paste it over here no it's not going to work so if you want to use this let me let me just show you where to go to get it so you can do movie movie database api we watch hot top time machine that's why that popped up movie database api um so it's i am where is it dm db so this is the one so you have to sign up for it do a little sign up here and once you do the little sign up you're gonna have if you go over to settings here let's see settings you should have your api key somewhere down here api here we go so there we go that's the api key and once you have that you can head over to their docs which is again somewhere somewhere here you can do the movie db api there we go so first one that loads up the api docs and then here we're gonna just search for something you can do popular so get popular movies you can click on that and you can actually go over to try out here and just insert your api key in here and then it automatically generates the full link for you all right and that's it so here this here if you want to copy paste this over this is it right here just like that and then you just replace this whole segment here with your api key okay okay cool let's not waste too much time on that but i have mine here so basically what we want to do in the app.js here is just to grab those movies so to do a a fetch what we need to do is just go up in here in the function api and we're going to create a new function in here so i'm going to call it fetch popular okay so this we're going to set it equal to a arrow function which is which looks like that cool so since we're getting some data from an external api we're not going to have that information available for us instantly right it's not it goes it depends on your internet connection it depends on latency etc etc so every time you're requesting something from an external api you're gonna need to add async in here okay so async and then here we're gonna just create a variable and we're gonna add a weight all right so every time you're fetching some kind of data you add a weight here and then we're going to use the fetch api i'm not going to bother with axios now just keeping that simple real simple that's not the focus of this video anyway it's going to be just the animation okay but the nice thing about async is it lets you write code that looks synchronous you know and not asynchronous so without doing the whole then catch if you don't know what i'm talking about it's okay just keep it like this it's super simple okay so what what this is going to do is it's going to fetch the popular movies and once it's fetched it's going to be available in this little variable that we called data or data or duty depending who you ask so finally what we need to do is once we have this data is we need to convert it over to a format that's very easy to work with so in this case it's going to be json okay so again we're gonna say await and we're gonna get the data and just add the json function at the end there that method function method okay hit save lovely doubly perfect so now what we need to do is basically store this data somewhere so okay so let's store it somewhere and let's also tell it when to run this because right now we just have a function here that's we basically gave it everything that it needs to do it's just not running okay so basically what we want to do is when we access our page here so when the page refreshes and the page starts loading up we want to start fetching it already so let's import a couple of things here i'm going to say import and we're going to call use effect and also use state okay from react okay so use effect basically you want to use it in this in our case we want to use it when the component gets rendered on the screen okay so if you write it out like this if you just follow along a little bit with me just say use effect and then you do an arrow function in here curly brackets and just say fetch popular okay and if we leave an empty pair of square brackets there what this is basically going to do is say hey when the component gets rendered out run fetch popular that's it now and here this array basically is um you can have a piece of state so if that piece of state gets updated then this use effect runs again that's kind of the gist of it okay so we're running this fetch popular now what we need to do again is store that data somewhere so up here we're gonna store it in a little piece of state so i'm gonna add const call this popular so again you can imagine this is like a variable here and then the second one here set popular is you'd use this to modify uh the data so popular okay so we're gonna set it equal to ustate and we're gonna add an empty pair of square brackets because the data that we're getting back from this movie database is gonna be an array of objects okay so what we do here is go down here in the fetch popular and all we need to do is say set popular and we're going to set it equal to movie dot results okay that's where um the list of the movies is if we i mean i can show you if we do a console log out of movies and let me also add movies here and hit save and if we do an inspect element go to console as you can see we get back this big object that has a page a results total pages blah blah blah but the results is what we're looking for which has all the data okay so that's what we're saving in the popular here so set popular movies results okay cool so again with the use effect if i add popular in here like this popular every time popular changes so if we set popular somewhere else then the use effect is going to run again but in our case now we just want to run it once have the data and that's it cool all right so now that we have that going what we can do is output the movie so i'm not going to create a bunch of components because it's not really going to be too much to work with here so i'm going to keep it simple and just mainly do it all in one file if you want to separate that after feel free to do it i'm going to just create the what's called popular movies like that okay here we go and then here i'm gonna do a popular dot map like that i'm gonna map over each movie and then return i'm gonna create one i'm gonna create one i'm gonna create a movie component movie.js there we go so here i'm gonna keep this very simple i'm gonna create a function called movie like that i'm gonna return just a div here make sure to switch this over to react okay just a simple div and i'm gonna have a h2 here called title and then we're gonna add an image which is not gonna have a source yet and that's it super simple and then i'm gonna export it default movie okay so we're creating a component that just returns us a div and then we're exporting it so we can import it up here so import movie from dot slash movie okay so basically we're mapping over each item in the array that we have here you saw we had like 20 of them and each item should return us a movie component that's essentially what we're doing here so return us a movie component and if everything's all right and good we should get back a bunch of titles here okay so it goes over each one and renders out one of those movie divs perfect that gives us a little error here saying that we need a unique key prop so whenever you're doing um stuff like this uh mapping over elements or lists in array it's going to ask you to add a key to the items so super easy just go here and add a key and set it equal to movie the id okay and that's it so if we check here it has an id attached to it so we can just pass that down also what i'm going to do is pass in movie down here so movie like that cool so now i can actually render out the images and the titles so we can go here now to access all that data so we're passing it down with props okay so i'm passing down the data there and now to access it in here we just need to add a curly brackets and just add movie here so now i can do curly brackets here and say movie dot title and here for the image source i can do now i cannot do movie dot backdrop or whatever that is and we need to actually prepend pre-append prepend uh some url to it so it's https dot dot slash image dot tmdb dot org slash d slash p slash and then you add the width that you want i'm gonna choose 500 you can also do original plus movie dot backdrop path i believe at this and hit save cool and that's it so let's see if that works and look at that we have our images because take a look if we just do movie backdrop path it's going to return us this weird string which is not an actual url so we have to do it that way okay cool so let's do a refresh see if we got rid of the error and we did awesome so there we go we have that going for us which is nice okay so let's style this up a little bit now so let's go over to our index css i'm just going to add a bit of margin here do five percent and twenty percent that's going to be fine just kind of center it a little bit and add a bit of space on the top portion and then in the app.css uh we're basically gonna remove everything here like that and just grab the popular movies and just add the display grid to them okay and then we can do grid template columns repeat autofit this is a very popular one to achieve a what is it called a responsive grid so min max 250 px and one fr one fr basically means take up all the available space so this is the minimum size it should be and one fr is stretching it out all the way so it looks all broken now which is all right because we need to grab the image and tell it to fit to that grid size so if we do an inspect element i believe you can see this uh let me see if i can select the grid for you so let's open this up open up app popular movies here we go where is that thing oh here we go so if i click on the grid how do i display this oh i don't know i don't know how to display this okay anyway i swear it just worked if you hovered over it but what we need to do is just add a width of 100 to the image like that and look at that now it fits to it and then i'm just going to add the height of 30 vh to make them all kind of the same length cool looks all stretched out and weird so to fix that we're going to do an object fit of cover and there we go that's much better and up here i'm actually going to add a grid column gap of one rem and grid row gap of two ram i hit save okay so column gap is this space here row gap is this one here yeah that looks good i'm going to add a border radius of one ram to give it that nice fancy look to it so that looks quite good and also a margin bottom of one ram to give a little bit more space perfect so that's that that's all we need there let's grab the h2s and just make them super small 0.8 ram there we go that's much better keep everything in line i'm happy with that okay is there anything else i need i don't think so that's fine for now cool so now let's see if we resize this look at that it just does it on its own super nicely cool let's full screen this so that's all done styling finalized now what we need to do is just add some buttons so we're going to create another component for this i'm going to call it filter so new file filter js all right so we're going to import use effect here from react because we're going to use this in just a bit but let's just create the html for it so function filter so again essentially what i want is to have three buttons here so i'm going to return a diff called filter containers container let me switch this over to react again so dot filter container and this is going to hold the three buttons for us so button button button there we go so i'm gonna name this all again i guess you could refactor this and make it like a drop down if you don't want multiple buttons to show up that's fine too the logic is still going to apply so it's going to be easy to change it to it but i'm going to use buttons so first one's going to be all let's do what did they pick for the second one um let's take a look here comedy and action okay so comedy and action cool and then we're gonna export default filter okay so let's bring this in our app again so go up to the top import filter from dot slash filter so i'm going to render this out oh i messed up the i uppercase the eye filter there we go so i'm going to render this out right above the popular movies filter there we go so hit save on that and we should look at that it's done we should have the three buttons here awesome so we're gonna style this up a bit as well um i'm gonna copy paste this over because it's just a little styling if you're interested in it so go over to app.css and this is what it is so pause the video just add a bit of color to it and stuff and round it down and what i did was also have the button.active which is basically just switches the background to blue because here we have the color on blue so we're just basically doing the opposite of this too okay cool so save that and close it up okay so how do we hook up the functionality to this well essentially what i want to do is here where we're looping over right this popular set popular here so popular currently holds all of the movies for us so what i want to do is make a new state that copies over everything from there but it filters out the elements or the movies based on what i'm clicking on so so yeah let's let's just do that and it's going to make sense so let's head over to app.js so again i'm going to create a duplicate of this so const i'm going to call this filtered comma set filtered and set this equal to use state okay because i never want to modify this one i want to fetch it once and store it here and then use another piece of state to kind of play around with but if i ever want to access the original thing that i fetched i have it here because if we only have this one and we mess around with it and we filter it out and then we update it there's no way for me to go back to the original one unless i do another fetch request which i don't want to do you don't want to do multiple fetch requests if you already have the same data uh stored um just to save a bit of of network usage i guess so okay so we created a duplicate here and what i'm gonna do is down here i'm just gonna where we set the popular we i'm also gonna do set filtered and do the same thing so movie movies dot results okay so we have a copy of it so if i do a console log actually we can just check in the browser if you want to install there's a react dev tools extension which is actually really good i like it because it it's just so easy to visualize what's going on in your application so mine is here somewhere where are you def tools so inspect and go over to components app so here we go we have three pieces of state actually two here so that's the original one and this one is the filtered one so just a duplicate of it for now i'm gonna keep this open just so you can see what we're gonna modify okay so what i'm gonna do is i'm gonna go over here to our filter and i'm gonna pass down a couple of things that i need so i'm gonna pass down the popular movies set that equal to popular it's our original one i'm gonna pass down the [Music] set filtered function set the equal to set filtered okay so this is just modifying the copy of it right now and what else i'm gonna do is i'm actually gonna create another piece of state called active genre just so i know which button is active so const active genre and set active genre and i'm going to set this equal to u-state and the default data that's going to be is going to be 0. so why is it zero how how do we get by this well if we check out the data that we're getting back so if we go over to our console and we do a let me see if i can check it out here for you it's a movie here we go so we can check out all the details that we got back so adult id and here we go we have a genres list and as you can see it gives back a number for us it doesn't say like comedy or blah blah because if it said if it was like a string then we would have added all here right we want to display all of them initially but since there isn't any and it's just numbers we're going to need to use yeah numbers that's so stupid so what's what's 16 though what's 35 um well we have to go over to the movie database unfortunately and search up genre and if you click on one of these it's gonna it's gonna tell you somewhere i promise uh if we go over to get movie list and do genre let me see let me just copy over my api key let me see if this is the one so just replace that i'm going to send the request let me just copy this over in the browser so there we go so this is how they define their genres so 30 28 means action 12 means adventure 16. i just took it so i just copy pasted these over to be honest just to keep it simple because it really depends what kind of api you're working with but i just the three buttons so since they don't have a zero or an all button i just added zero there and we're gonna kind of configure it ourselves but we're gonna use comedy which is 35 and action which is it's somewhere here 28 okay so i'm just going to keep this open for now just so you know so initially i set it equal to zero which is going to be all okay so cool so that's that so let's also pass those two things down in here because we want to attach them to the buttons we want to change this piece of state in our filter down here so that's why we got to send it down as well so active genre is going to be equal to active genre and also set active genre is equal to set active genre okay so there we go now we have everything available in the filter cool so let's head over there and to access them we can just do set active genre here make sure you add the curly brackets there we go and then active genre set filtered and also popular popular okay so that's it so what do i want to do well when i click on all i want the set active genre so on click let's add an on click equal to i'm going to run an arrow function in here i want to set the active genre to zero all right so that's the default one anyway so we don't need to do anything about it but when we so we can just kind of copy paste this over here so when we click on where's the erroring out i need the curly bracket let's copy that over so when we click on comedy we can look at this list here so comedy is 35 so i want to set the active genre over to 35 and when we click on action i want to set it to 28. okay so that's it yep let's go over to the codes 28 and that's it so let's hit save and see if that works so head back over to the app and click on app and there we go so again we have our popular which we initially fetch we have our duplicate over here and then we have our active genre which is set to default zero so when we hit all nothing happens when we hit comedy changes to 35 and when we hit action it changes to 28. cool so now what we need to do is grab this duplicate array of objects that we made here and based on this number here we have to filter out the movies so it's going to be quite simple so what we're going to do is use use effect so basically we're going to go here and say use effect add an empty arrow function and here i'm not going to leave an empty array here i'm going to add active genre so basically what this means is run this function every time our active genre changes which is basically every time we click these buttons right we're changing the active genre so active genre so in here we'll just modify that state here and then everything else is gonna magically work so what do we need to do well if our active genre is equal to zero so triple equal to zero then i wanna do set filtered equal to popular alright so basically don't do anything just just make sure it's the same as our original one and then i'm going to return this function so if i add a return here nothing else is going to run in here all right so this is kind of like a check and down here we can add a cons filtered so just make a make a variable what i'm going to do is grab the original so popular that one i'm going to add dot filter and in here basically for each individual movie what i want to do is say movie dot genre id ids so if we take a look here so every movie has the genre ids i want to make sure that it contains one of those things if it contains comedy or action so if it contains 28 or 35. so if genre ids that includes the active genre and that's that and that's it so hit save and down here i'm just going to say set filtered to the filtered variable that i have down here and that's that so let's give it a shot and see if it works so if i hit comedy now and look at that it filtered it out so if we open it up we have seven movies and if we check like genre id's 35 is comedy so it does work it does include comedy perfect and then we can just click through and see if it works action boom look at that updates and everything is all right now the there's one little problem here is that we never use the set filtered state we are always rendering out we're basically doing a loop over the popular which is the original which never changes so not nothing is going to update here in our ui so all we need to do is take this popular and change it to filter it and hit save so there we go and hit comedy now and look at that it filters it out nicely perfect that's awesome another thing i want to do is also add like an active state to each one of these so we can go over to filter and all i'm going to do is go here and add a class name and just say hey if active genre triple equals to zero then add the active class to it else don't i hit save i'm going to do the same thing over here so i'm just going to copy paste it twice one and two and here you just want to modify basically the number so if it's 35 and down here if it's 28 and hit save so let's take a look now so look at that it's highlighted and now when we click that also updates nicely perfect so that's hooked up as well okay now it's time to animate this so it's going to be really simple let's head over to let's head over to our filter let's see if we need anything in there no we don't let's see if we need anything in the movie where do we need it i don't know okay in our app cool go to the app let's import motion from framer motion okay so if you want to animate something in frame or motion you basically got to replace the elements whether it's a h1 a div you gotta pre-append this motion tag to it so in our case i want us to animate the grid i want this whole thing to keep updating and animating when we filter these out so i'm going to grab this popular movies down here and just do motion.div that's it change this to motion.diff cool and hit save so that's it so now i can access things like animate so i'm just going to show this really quickly set that equal to two curly braces in there i'm just gonna say why a hundred look at that it does a little animation as soon as the component gets rendered on the screen but we don't want to do that what we want to do is animate the layout of it so basically i want to tell framework motion hey when the elements get removed from this grid animate your way to make it look um just animate them in order and don't do a sudden jump so all you need to do is just add layout there really and that's it so if i click through this it works but that's kind of weird as you can see so to fix this weird stretching issue that's going on now what we need to do is go to the child element and also add a layout to it so let's head over to our movie right here we're gonna import motion from framer motion okay and just replace this with motion.div and this with motion.div okay so whenever you're experiencing that weird stretching issue just go over to the child of that div and add a layout to it and that's it and hit save so let's take a look now and that's that there we go all done so as you can see now whenever you have this layout it's really cool because it works with display flex as well so it can animate all of these weird properties that you would normally wouldn't be able to so if you have justify content center you can do justify content space between and if you have layout on it it's going to know how to animate those values so it's a really cool thing that you just add to it and then it just does it on its own now there's a couple of things i want to add is when i click on this i don't want those elements to disappear all of a sudden because it looks a bit i mean if you prefer it if you like it like this then hey you're done but if you don't then you can keep following along so just go to the movie so each individual element basically i want to tell them hey fade out and fade in when you get removed and when you get attached um to the dom because when we click on this basically those elements get a display none and they get removed from the doll so what we can do since we have this motion div on it so next to the layout we can also add a animate and set that equal to opacity of one and hit save and we can also so let's hit save and let me show you this so as you can see nothing happens really uh because by default it is going to have opacity one so what we can do is we can set the initial value of it to opacity 0. so now before the elements actually get mounted to the dom they're going to start from opacity 0. so when i hit refresh as you can see they fade in so that's good the problem is they never fade out so for that we need exit opacity zero okay so animate in opacity one exit opacity zero okay makes sense cool still doesn't work of course because why would it be that simple what you need to also do is wrap this motion div oh sorry i did it and the wrong thing actually should have done it in the movie so let's just copy and paste this over to here my apologies should be here on each individual movie and there we go it fades in so as you can see it does fade in but the fade out doesn't work okay so we have we're halfway there faded works exit doesn't so for exits you basically need to add another component that framework motion comes with called animate presence which literally does that it's gonna detect the element that's gonna get removed from the dom and it's going to animate it out so exit here just doesn't work you need to add a bit more faff to it but that's all right it's quite simple so just go over to app js and we're going to import framer motion here and comma we're also going to import animate presence and basically you just want to wrap the element that's going to exit and come in with this animate presence so in our case is gonna be this uh movie here right this is fading in and fading out and exiting and entering so yeah so just go here and just add in animate presence to it like that wrap it up wrap it up and stay safe save cool we can remove this weird thing that prettier added and that's gonna be it so let's take a look now so look at that it fades out and the rest of them fade in so there we go that's pretty cool now huh it kind of it's a bit more visually obvious of what's going on here so there we go that's kind of the gist of it you can play more around with it if you want to i guess you could animate different properties here you're not really stuck to opacity zero you could do scaling and stuff like that so animate n guess you can do from scale to scale one this this might look very wacky but i'm gonna try it let's do scale zero here as the initial so i mean it's weird but yeah and you can also change the duration of this if you want so you can add a transition to this i believe it was transition and here you can define the duration so two seconds that's quite slow isn't it but yeah you get the gist of it so there we go that's it that's a framer motion and animating a grid to get this cool sorting effect so i really like it all right hope you enjoyed this thank you so much for watching uh check out the courses down below in the description and i'll see you guys next time bye

Channel: developedbyed

Views: 202,040

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

Id: nyg5Lpl6AiM

Length: 40min 19sec (2419 seconds)

Published: Tue Feb 08 2022