Slideshow animation using Framer motion in React

okay guys so welcome back again so in this video we'll be creating this slide show in react using framer motion so this is the demo of the application so here as you can see that here we have a image component here and then we have a background color here and then we have two buttons here right and left so if i click on right we see that the image is swiped to the next image and if we continue doing that we get the next image as always and if we click on the previous button we get a reverse slide in effect that is the previous image comes into the canvas and then we can see the image here and this can continue going on forever because it's an infinite loop and as you see that it started again from the first image here as you can see here and the same goes as well if we go to the previous button or if we click the previous button again and again so this is all what we are going to do in this video and all these images are taken from on a splash here that is all the links of the images are taken from unsplash they provide royalty free images or free usable images inside the project inside the projects and then we are going to use this library called framer motion so this is the library which we are going to use that is a react library for doing animations called framer motion so if you want to know more about promo motion then you can go to the link in the description below and what i've done is this that i've divided this project or this video into several steps that is firstly we'll be creating the html skeleton then we'll be doing our own styling using css or sas whatever you prefer you can do use whatever you like to use and then we'll be implementing a basic slideshow without any animations that is you would be having these working buttons to switch to the next and previous images and finally we are going to implement the animations using framer motion so it depends on your understanding with frame of motion or your understanding with html or css that whatever you know you can skip that part and then you can switch to the uh section in which you are interested in so this is the road for the video ahead so before diving into coding if you haven't subscribed to the channel do subscribe to the channel for more videos like this and in the end if you like the video do hit the like button it motivates me a lot so let's dive into our code here so here what i've done is this that i've created a very basic react application using the create react app package by doing npx create react app and the name of the project here and if we see here we the project name in our case is this slideshow tutorial as we can see here so here is the basic react project and i have started this project by doing npm start like this so it is a very simple basic react thing to start the react project using the create react app package and we have this thing here so firstly what i want to do i want to create a layout or the html skeleton for this project here so as you can see here in the completed project we have a container here and then we have a dev called slide show and then we have an image inside here and then we have these two buttons so let's do that so it's a super simple html skeleton here so firstly what i'm going to do i'm going to remove each and everything from the app component here and this app component i get from the create react react app package which is rendered inside our index.js file as you can see here so this is nothing fancy about app.js file and here i would like to create a div with a class of containers so let me do dot container to create a div with the class of container and now i would like to create a class called slideshow inside this div so slide show and these are classes which i am naming here is only for styling purposes to style the application and then inside here i want to have an image component or an image image html uh thing here with a class name of slides so i would be doing img.slides like this to give it a class name of slides and the source you would put in a put in in a moment but for the alt attribute i would simply say slides though it doesn't matter whatever you want to call the alt attribute but i prefer to give an alt attribute to my images here and then after this what we want to have we want to have our buttons here two buttons here one for the next button and one for the previous button that is this previous button and this next button so let's go back here and here i would simply say button like this and i would be given the class name of prev button that is the previous button so i would call it priv button and in the similar way i want to have another button called the next button so i would call it next button that is the class name and for the text for the button i would be using an emoji called right maybe so let me select this thing here and now for the previous button what i would do i would simply call it lift and then i should get the respective emoji here like this and if i save this app.js file we should see here that we have these this thing here so let me increase the zoom level here so we see that we have this kind of a thing here inside our html layout here and this image is broken because we haven't provided any source for the images so let's simply copy and paste some images here so i have an array of images so which i would use inside this application so let me paste in the images array here so if you can see these all image links are coming from unsplash and i would be using the images from unsplash so this is a basic image variable here containing an array of image sources that is if we go to any of the source we would be seeing the respective image here if i command click here we are seeing these images here so we are using these images here inside our application so let me minimize it and now what i can do i can simply put in a source here like this so i can say images and let me reference only the first element of the image array here so if i save this we see that we have a humongous image here and then let me zoom out uh not zoom this out but let me zoom out this thing here so we have this image here and then we have these two buttons here if you can see it so now this is all the html that is needed for this application and now what i am going to do i am going to style the application using the css file using these class names here that is the container slides show and the slides and the previous button and the next button so let's do the styling for now and if you want to skip the styling you can simply copy the css file from my repo which i would be definitely sharing and it would be linked in the description below so let's go to the app.css file and let's remove all the styles that come by default inside the app.css file let's save this and now what i'll do i'll simply say colon root and here i would simply say box sizing to be a border box and i would simply say margin to be zero and padding to be zero that's my style reset here or css reset here and then i would be targeting in the container class uh that is this class here that is this container class which contains all the application logic or all the html elements of the application and now here what i would do i would simply display it as flicks so let me display it as flicks and i won't be going into details about the css it is very simple css that i'm going to write here and i'm going to give it a height of 100 viewport height and i want to give it a background color so let me use this color here so uh 0 f0 and c29 i'm not going to do the linear gradient add as it was in this thing here that is it is simply a linear gradient but i am not going to do that linear gradient because you all can do that very easily i am simply providing a background color so if we save this we see that we have this background color here and that's all what we need for the container thing here and now what i'm going to do i'm going to target the slideshow dev here that is this div here with the class name of slideshow so let me target that slideshow here so dot slide show and here we would simply say margin to be auto so that it is placed in the center of our container div because it the container div has a display of flakes and then we give it a width uh width of 60 vh or 60 viewport width like this and then i want to give it an aspect ratio of 16 by nine so 16 by nine and sometimes it says that i should use calc here so calc 16 by nine i hope that this should work and then i want to position position it relatively because i want to position all these elements that is inside the slide show div that is this image button and this button here to be absolutely to this slideshow container so therefore i am giving the slideshow uh position of relative here and now i would say overflow to be hidden and border radius to be let's say 16 pixels so let me save this and we see that now we have this this thing here we can only say this thing here it is all all centered here and never mind about this cutting here i would be fixing that so this is all what we have right now so now let me target the buttons here because now buttons are not visible and the buttons are placed relative absolutely to the slideshow that is these buttons i want to position them absolutely to the slideshow diff so let me directly target the button here so instead of using a class i am directly using the html element call button because because in our application we have only two buttons here so what i can do i can say padding to be 16 pixels font size to be 18 pixels then the width of the button would be 64 pixels aspect ratio would be one border radius to be 32 pixels border radius it should be like this a border to be none cursor to be pointer and text line to be center and color to be white that is the color of the text here so if we save this we still don't see our buttons here but let me give one more thing to our buttons here that is the on over state of the button so on hover what we want to have we want to simply change the background color to something else and we haven't provided a background color here so let me provide in a background color here to a button in normal state would be this color itself that is the color of the this this color here and now when we hover over the button we can give it a background color of something else so we can simply say hash 24243e like this and now we would target the individual buttons that is the previous button and the next button that is both the buttons have a class name of previous button and the next button so let me target the previous button so it is very simple to style this previous button to put it in the center of this uh uh slide show diff so i can say dot pref button and i would give it a position of absolute absolute absolute top to be 50 left to be again 16 pixels only and then i'll simply translate it because if i simply save this we see that this button is not vertically centered so we need to translate it up by 50 in the y direction so i can simply say transform translate y negative 50 percent and now it should be centered in the vertically in the center it is vertically in the center and now what i'll do is simply do the same thing for the next button that so let me copy and let me paste it here i only need to change in the left and right margins so i can simply say right button not the right button but the next button and instead of left i should say right to be 16 pixels so if we save this we see that we have this button here and we see the hover states here if you can look at closely here and now what i'll do i'll target in the image element here that is this image element because currently we see that the image is like overflown here and we cannot see the image properly so let's go to the app.cs css file and let's copy the slide name from here and that class name from there so the slides was the class name for our image element i would simply give it a position of absolute uh top of zero left of zero again then the width would be hundred percent that is the hundred percent of the parent converter container that is the slideshow container and again the height would be 100 percent that is the height of the parent container and we gave it an object fit to be cover that is to cover the image element and then the object position would be center like this so if we save this we have this result here and it looks pretty similar to what we have here so let me go to the first image here uh this image here and it looks it is similar to what we have inside our project right now this thing here so now that is all the css that you need for this application and now what i am going to do i am going to implement the button clicks events here that is if we click on this button we should go to the previous image and if we click on this next button we should go to the next image inside the array so let me close the app.css file because that is not required anymore and now here what i'll do i'll create on click event handlers but before that i am going to create two functions here inside our app component so i would say function next step let us go to the next image it would be like this and then we have another function called travis step though i could have used only a single function here but for clarity i am simply using two functions here to make it more explicit here so here on click event that is the on click event of the this previous button i want to simply call in the previous step so previous step like this and if you want to go to the next image we want to have this button click event here and that would simply show next image that is next step like this so let me save this nothing changes here and now to display the image according to the step on which we are we need to have some kind of a state variable here here so that we can reference that image from the image array so what i'm going to do i'm going to have an index here for the image to have the image index here so i would say use a state snippet or i would use the user state snippet to get in the index set index would be 0 that is initially start from the very first image of this image array so let me import user state from react so it is imported at the top here and instead of providing an images 0 here i would simply say index here so initially the index is zero so this image would be again shown here so if we save this we have this image and if we simply use this initial state to be one so it would use the first image of the images array but let's keep it back to zero here and now what do we want to do if we want to go to the next step we simply want to set the index of the set the index to be the current index plus one so this is a getup copilot that is suggesting me this thing here but he is wrong in his own way and we'll fix that later but if i do this thing here we can save this and if i click on this button we should be able to go to the next image but this would feel at the very end of the very end of the the very end of the index here because we have let's say maybe 10 images inside our array and if we always call index 1 then it would only then if we only have 10 images then if we call this thing here then the index would be 11 and then there is no 11th image inside our images array so therefore this is wrong which github copied suggested so instead what do we want to do firstly we want to check or let me stop the copilot thing here that is deactivate copilot here so that we can write our code more efficiently so let's disable for javascript so here what we want to do we want to check that is if index is equal equal to images dot length minus 1 that is if we are on the last image then what do we want to do we want to set the index to be the zeroth index that is again start from the very beginning of the images array so that's what we did here we firstly we checked that if the current index is same as the in images length minus 1 that is the total number of images minus 1 then we simply set the index to be 0 and then we simply want to return from this if block because if we don't return then again we would be setting it to be index plus 1 and that's not what we want to do so if we save this and if we reload our application we can go to next next next and finally at the variant we should be again starting from index 0 and this is how this looping works for the images here and now in the very similar way what we can do we can handle the preface step so instead of simply doing set index to be index minus 1 firstly we need to check that is if we are already on the 0th index so if index equal equal to 0 then we want to set the index to be length minus 1 and then we want to return otherwise we simply want to set the image to an image index to be index minus 1 so let's save this and now we see that we have a full working slideshow here without animations so now if you don't want to have animations inside your applications you can stop the stop stop watching this video but if you want to do something like this that is sliding in and sliding out of the images then continue ahead with the video and here is where frame of motion comes into effect so up until now we haven't used any other dependency apart from the create reactor package we see that we do not have any dependency here or any extra dependency this is all default coming from create react app package and now what we are going to do we are going to stop our application and we are going to install the frame of motion dependency so you can go to this npm page to get the dependency here that is npmi framer motion so let me copy it to my clipboard and let me go back here and let me simply paste it here and let me install it so now we have this frame of motion dependency installed and now what i'm going to do i'm going to close my package.json file and i'm going to again start my application by doing npm start so let me do npm start like this so our application should be started and we should see no change inside our application because nothing has been changed here so let me minimize the terminal here and now what i'm going to do i'm going to import a couple of things from frame of motion so i would say import motion from frame of motion now because in 99 of the cases if you want to use frame of motion inside your application you need to include this motion component here and now to make this image as a motion component because here inside the slide show div that is this div only this image component is a motion component and i would show you in a moment so let me and do it like this that is motion dot image like this and now this is a frame of motion component by doing motion dot image and it would be rendered as an image tag only inside our uh inside our this html page here it it won't be rendered as motion dot image but instead it would be simply rendered as image element here and not the motion dot image element but in react we made this as a motion component so that we can add animations to it and now to make the animations using framer motion we are going to use something called variance inside frame of motion so in variance we can define the initial position of the image and the final position of the image as well as when it exits out of this exists out we can also provide properties about that exit transition so currently as we see that we are on this image so if we click on this image we go to the next image but currently what happens is this that the new image is immediately rendered here or immediately visible here so what we want to do we want to have some kind of exit animation for this image whereas we want to have some kind of an incoming animation for this image that is whenever this image is present we want to animate it from the right side and we want to exit this image to the left side so that's what we can do using variance inside frame of motion so we can define the variance outside this app component here so we can say const variance equal to so here we need to provide in the initial state the animated state that is the current state visible on the screen and the exit property for this image so we can use initial here and again you can call this hidden but i am simply calling it initial because that is the initial state of this image so here we can have an object here and then we need to provide in the animate property here and this animate can be simply called as visible that is whenever this image or the incoming image is visible uh to make uh add these properties to that image and the initial properties are these properties and then finally or we can again have an exit property for this variant here that is whenever the image is exiting from this slideshow apply these css properties or these transition properties so here we have these three things here that is the initial animate and exit so initially what we want to do we want to have an x here that initially let the image be at 200 pixels uh distance whenever it is entering and then we want to have give it an opacity so opacity would be let's say 0 that is initially let the opacity be 0 and then when you want to animate it on onto the canvas we want to have the x position to be 0 the opacity would be 1 and now when it exits from the exits from the screen or from the slideshow we want to take it to negative 200 and the opacity to be zero like this now to apply these variants inside our image component here what we can do we can provide a property here or a prop here called variance so variance would be these variants here uh which we just created and now every motion component has an has three more props at least three more props called animate initial and exit so we can simply say animate would be equal to animate and these are all text values here uh that is these text values here and then we can simply give it an initial value would be equal to initial and then we have an exit value for this motion component and that would be called exit so let me save this and now this thing here that is this animate is a prop and the value is this animate so here i am calling it animate initial in exit and if you would have used different names here that is if you would have called this hidden visible and exit then here inside this thing here you would have written hidden visible and exit so it is simply a text value that is present here inside your variance object here so if we reload the page we see that initially it is animating but if we go to the next image we see that this is not animating and it is because this motion component treats this whole image as a single image to give these images different keys or different to make these images as different components what we can do we can simply provide in a key property here so i can say key equal to image let me call it image and then we can call it index and later on we are going to change this index uh in this key value also to make the animations smoother but for now every image that is rendered onto our page here has a different key here and then we can see the animations here so if we save this we see that we get this animation here i like this but one thing you might notice that if we press the back button then also the images are entering from the right side and if we go to the next thing here we can only see the images entering from the right side whereas we cannot see the image exit transition here which is defined here that is the exiting image should have an exit property of this that it should translate to negative 200 pixels with an opacity of zero but that is not happening here and to do that what we need to do we need to wrap this motion component inside one more component here that is called animate presence so let me import animate presence from framer motion and now we can wrap this motion component inside animate presence so i can say animate not cinemate but it should be animate presence like this and then we can wrap this motion component inside animate presence and now if we save this we see that as soon as we reload the page we get this initial animation but do you really want this i don't want to have the initial animation here because i always want the first image to be visible here so what i can do i can simply say initial to be false that is do not apply any any animations initially when the this component is rendered so let me save this and if i reload the page we see that now we are not getting that initial animation for the first image but if we go to the next image we see that we get the next image whereas we also get the transition for the previous image so if we go next image we see that we get some animations here so let me increase the size here so if we go to the next image we see that we are getting some sort of a transition for the outgoing image as well as well as the transition for the incoming image so this is what this animate presence does with this key prop here that is this key prop here and now we see that even if we are going back we are getting the images enter from the right side whereas we want to enter the image from the left side that is our animation or the x direction of the image entering and exiting should be depending on the button on which we click in that if we click on the previous button the image should exit out from the left right side and enter from the left side whereas if we click on the next button here then the image should enter from the right side and the exiting image should exit from the left side so to fix that what we can do we can pass some kind of a variable here inside this variance thing here so that we can manipulate the direction accordingly so what we can do we can create one more state variable here inside our app component that would be called direction so use state and here i can simply call it direction and initial direction would be let's say zero because we don't know that whether the user is going to click the next button or the previous button so let's start with a direction of zero and here what i would say that if we click on the next button the direction would be positive direction that is this axis that is this side should be positive so if we are clicking on this next button i would be simply setting the direction value to 1 and if we are going to click on the previous button then our direction value should be minus one that is negative one initially it is at zero so what we can do here that is inside our next step i can simply say set direction to be one that is we are since we are going to the next step let the direction be positive and if we are going to if we are click on the previous step let the direction be negative that is minus 1 so eventually our direction would jump between 1 minus 1 1 minus 1 and initially only it is 0 here so what we can do we can provide in a custom property here inside this variance thing that we have here called direction so let me provide that here so every property here inside this variance object can can be returned as a function here so what we can do we can simply use an arrow function here called direction and then we want to return something from here from this uh let me let me cut it out from here and now what we want we can do we can simply return something out from here that is return this property here that is this thing here and the same things we can and if we save this nothing would change here because we are not passing in the direction or we are not using directions here so every initial value is same as well as for the uh this thing here that is for the previous button so what we can do we can use the same kind of a same kind of a functional uh return statement with this thing inside the exit drop because we we are only interested in the initial state and the exiting state because the animating state would be not dependent on on direction because it has to be at x equal to zero and the opacity should be one so instead of returning returning this exit thing from here what i can do i can again use direction here and this would be like this and then we can simply return this object here like this and this is something like this so let me keep it on different lines like this and now we have some kind of initial here and then we have some kind of a direction here but how do we pass this direction property or this variable inside this function here inside this variance here so it is pretty simple to do with the frame of motion i can simply use this thing here that is i can simply pass in a property called custom here so custom would be equal to direction and whatever we pass here inside this custom prop that is here we are passing in direction this custom prop would be passed in here as the prop here and again you can call this thing anything what you like to do if you would like to call here d or something like that you can call it like that but i'm simply calling it direction here so if we save this we still don't have any change inside our application if we click on the previous button or if we click on the next button so now to use this direction inside this x thing here what we want to have is this that if we are clicking on this next button our direction is positive that is one then we want the initial state of the entering image should be plus 200 pixels so what we can see we can say direction is greater than zero then we want to have the entering image coming from plus 200 pixels otherwise we want to have it coming from negative 200 pixels that is if we click on the previous button the direction was negative that is it is not greater than zero so the image should enter from negative 200 pixels and the same logic we can apply to this exiting transition that is if direction is positive that is the new image is entering from right side that is if we are clicking on this button here next button the exit exiting image should have a transition of negative 200 pixels so that's what we have here and otherwise if it is negative the exiting transition should exit to plus 200 pixels so i can say colon 200 like this so this is all what you need to have here and now if we save this and if we reload our application our application might somewhat work but not as as we expect it to work so let me increase the zoom level here so let me refresh the page so we are on the first image so if you click on next we see that the exiting image goes to the first image goes to the right whereas this image enters from the first thing here and if we click here we see that now we are getting some kind of a similar transition that we wanted to have but if we click on the previous button watch what happens this image should go to the left this image should go to the right and the entering image should come from the left side whereas this won't happen here so let me press this button here we see that the images overlaps and that is because this direction property that we set using this custom thing here react doesn't know about this direction property when it is mounting and mounting components so if you simply want to provide in the value of the direction as per the new value set by this button here or this button click by using the set direction thing here you can change it inside the animate presence so here if we pass in custom to be direction that is pass in the current value of this direction to the exiting component so then this should work fine so if i save this and if i reload the page everything should be fine here so if i click on next here we see that we get the direction here that is we are going to this thing here and if we click on the previous button we are not getting that glitch effect that is firstly it enters to the exits to the left and then enters from the right so you can try it out so if we click here we see that we are getting these transitions here and if we have a look at the completed application just one last thing to do that we see that we have this kind of transition here whereas inside our application we are getting some kind of a spring animation here so let's fix that so to provide that animation or to or that transition what we can do we can go to this animate prop here or this animate variant here and here we need to simply provide in some transition value here so i can simply say a transition transition like this and here i can give an x value for the transition and i can provide in a type here so type would be spring and then we have a stiffness here and this is all like hard-coded values you can use any of the transition values i am simply using a stiffness of 300 for the spring and the damping effect of let's say 30 and it only simply simplifies your transition here basically what you can also do you can simply let me comment it out and let me provide here transition uh and here let me i can maybe i can do this thing here that is easen so let me save this we see that we get some kind of an easing effect here and the same transition you can also provide here that is transition inside this animate prop so i can do it like this transition is in so if i do here we see that we get some kind of a smooth animation here and not the springy animation which we are having is previously basically what we have inside this application we have some kind of a different transition value and that is this transition value here so let me use that transition value here and let me comment out this transition value and the damping was 30 i just checked my repo here and for the opacity i want to simply give it an uh give it a duration here so let me provide a duration here and that should be 0.2 seconds so let me save this and now everything is same as in as as was in the demo so if i click here we see that we are getting these transition here and the same transition object you can also provide in the exit property here because we also want to have some kind of exit animation whenever the exiting is happening so let me save this and now if i click here we see that we get this smooth animation here which is the same as in this demonstration here so we can click here we are getting this thing here and if you are wondering that why this animation is slow as compared to a demo it is because simply because in the demo i have used 1000 that is coming from 100 1000 pixels and exit out to the negative 1000 pixels and the same thing we can do it here also that is i can again use the values here 1000 and 1000 just save this and let's go here so if i click here we see that we get the same effect as was in the demo so you can play out with these values and you can also like scale up the images and it may give you a different effect so maybe initially let the scale be i don't know if it does work but let me try it out let the scale be 0.5 and when it's like into the canvas or into the viewport it's like a scale is one and when it exits out it again scales down to 0.5 so let me try out this animation maybe we get some different effect here so we see that this time we get this time the kind of effect so you can play out with this thing here so guys that's all about this video so if you like the video do hit the like button and all the code is uh is in the repo on github and i will share the link so again i'm saying that if you like the video to hit the like button and if you haven't subscribed the channel till now do subscribe to the channel so thank you bye bye take care and have a good day and have a great day

Channel: Mafia Codes

Views: 14,173

Keywords: yourstruly, How to use framer motion, Animation in react, Animations using framer motion, Framer motion, Variants in framer motion, Animate presense in framer motion, Slideshow in react

Id: OgXXSixKIqQ

Length: 38min 21sec (2301 seconds)

Published: Tue Aug 09 2022