Next.js 13 with Framer-motion animation

hi guys welcome back to another photos Go video this channel is where we discuss and learn new skills around the topics of design and development if you want to grow your skills and learn new things that are coming up please subscribe for more videos just like this don't forget to smash the like button for me this really helps me to create more content in this video we'll be learning about how we can spice up our application with awesome animations we are going to use next setting and framework motion for our example here but where motion is a react Library so you can still achieve the same results in your react projects or any other framework and libraries out there that are built on top of react I'm inside the framework motion official documentation and framework motion is an awesome library and excellent choice of library for creating animations in web and also multi-cross platforms as well firmer motion is a library created by framer which is a designing and prototyping tool with frame of motion you can create slack and modern animation to your react-based applications let's take a look at what we will be building with Varma motion so I have already opened up some local server and pretty much it's a simple app so that we can demonstrate and experiment things out with the framework motion and you can see we don't have any frame motion added in this particular app do some animation with remember motion so um and here we have a list of products where we can see a list of products here and here we have a contact us page which is pretty much looks uh dummy I have taken these components from uh tell me the UI and uh thanks to telemony UI for beautifully creating these um UI for us all right so uh let's take a look at how we are going to change this application by using framework motion and in the other Port I have um I'm running the other application and that I have already completed and we are going to do this side by side uh together all right so um this is a home page so nothing here so I have created this particular route where you can see some slick animation going on where we have a fading animation uh from the bottom to the top and also um some animation to these cards and if you go to products you can see all the products are like easing in and um like fitting in but you can still achieve a lot of things with rainbow motion so uh let's back go back to um the framework motion documentation and uh read the documentation right here so let's go to introduction and inside introduction we can see the first thing that we will be presented is the motion component well the motion component is just like adding motion dot to your HTML attribute so it can be paragraph tags anchors or any other stuff so motion dot then div and we probably give a couple of um props to this particular tag so to see and the prop is animate the animate prop and you can further uh drill down into animate prop but these are some of the um possible animation that we could achieve with framework motion we can also add some powerful gestures like wild hover white wild tap drag events and we will also use some hover um animations and also while tap animation but not drag animation for this tutorial but we will obviously going through variants also variants are like used to animate the entire subtree of components so we can animate something like staggered children and animate all the all the variants you know variants which is probably a nested a dome tree so to say and we can animate all of these and also comes with scroll trigger server side Running Animation motion values and whatnot so um uh let's go ahead and scaffold a blank next year's setting project and I'll get back to you I've already created a next dating project and it's listening to changes in Port 3000 and I've created this a particular project with the new command which is npx create an example it is with dash dash experimental Dash app slang so that we could experiment things out with next setting but as I said before this is also applicable to next 12 or react or any Frameworks and libraries based on top of um react even remix as well so uh the first thing that I want to point out and discuss about is the folder structure that I have prepared here which is uh the page is the the default route which is the Home Route as we can see a Nexus with framework motion and here is also next year's with remote motion and this is the Home Route and we have the piece wrapper which wraps the entire component just not the Napa because we want to animate things sliding in effect to the piece wrapper so inside of the page wrapper I will add some frame motion animation um here so I will just stop the server and install firmware motion with npm I framer motion so after that's been installed we can use an import firmer motion inside of our project so um yeah and framework motion is installed so let's go to paste wrapper and inside page wrapper two things we want to import from variable motion first is a motion and the second is enemy presence uh we haven't really discussed about this particular thing called animate presence but you can find this in the firmware motion docs so let's discuss a bit about anime presence so animated presence is um the animation that happens when something is removed from the Dome tree or from the react tree and it allows components to animate out when they are removed from the reactory but it's not necessary that we need to add an animate presence but uh if there are some glitches happening to your application when um the Dome tree has been removed then uh probably you need this particular thing to be imported called animate presence and that's when uh the unmounting happens and you can see Hello steamed differ um that on mounting until that operation is complete so it notifies when um when the components are being unmounted so this is uh pretty handy stuff so we'll be using this and obviously these are from framework motion and let's go ahead and add these animated presents to our tags here so that we can wrap everything inside of animate presence and probably we need a closing brackets here closing fragment and format this stuff all right now the next thing is as we discussed before we are wrapping our entire application with motion.dev and after adding that particular motion dot we can add further attributes not attributes but pass down props so the first prop that we are passing is the initial which is on the initial value of the um the animation that's going to take place so so the initial value for the opacity and we'll be animating this opacity opacity would be zero and the Y position is 15. all right so uh looks good these are the initial values and we want to copy this and paste it here and we want to call this animate and we want to animate is the opacity uh to one and uh paste this y to zero all right and what happens when it exists the animation uh well uh in the exit we could um add something like exit and exit while exiting it should be animating two not nine but zero and uh y to 15. let's let's see what happens and also add transition property so that it will be uh smoothing in and add transition and inside this we can add property like delete which would be uh 0.25 milliseconds so after this is done probably we should see some kind of Animation to our application because we are wrapping every component or every page with the page wrapper uh products page contact uh page and about page are all wrapped with the page wrapper so uh this pays wrapper motion that div will take into effect now let's um run our application with npm run Dev and it should open up in this particular Port if you refresh then we could we should see something sliding in because uh yeah now we can we saw that something is sliding in right you can see um yeah the animation is being um placed in the wrapper component that's why it's uh animating all the pages all right it looks good looks good until uh so far so now let's go ahead and animate some of our net bar uh Styles or nampai UI elements so inside of our nap bar what we want to do is we want to animate um we want to bring this motion from framework motion so I'll just import a motion from motion and uh the first thing that we want to do is we want to know the um actual um the active route for so to say if it's an about page we want to highlight this if it's a product page we want to highlight products if it's to contact us we want to highlight contact so in order to know what is the route that that the user is trying to visit we can use um handy Hook from next called use path name so let's import the use path name after importing use path name we can create a constant and call it path which helps us to know the right path name for the path so we will use that hook which is use a path probably should path name and just call it and this path now what we can do is we can add a conditional class names to our path so that if the path is exactly to the path that they are trying to they are looking at so this um this area is being mapped so we know the path that is the user is visiting so we'll remove that and replace this with template to do literals or backticks and we can add a dollar sign here and let's suppose an l dot ref which is the ref property is uh strictly is equal to the path then we should add this particle Styles else node we will add these Styles so inside this Styles I'll just grab the styles that uh that was ready and then and these are the styles that we'll be adding and uh if it's not then we are not adding any of the Styles and obviously we want to add some some Styles um despite of this path is uh like the same part that user is visiting or not all right with this in place we should save this and see it in action and we can see about is being highlighted and if we go to products products is being highlighted but the thing is we are not uh taking I mean we are not seeing the yellow uh probably it should compile up at the SAS so we can see now it's yellow all right so looks good so far now let's also experiment things out um when users are hovering things out all right so for that we already imported the most so that's why we imported that and we also need to add a motion dot div for example we can add a motion dot div to this particular element and after adding that we could add some uh prompts so one of the props that we could add is while hover while hover and we could uh add some animation properties here so animation property that we are trying to do is when users are hovering we are sealing things out so list light write scale which is 1.1 all right so after we added scale and we format this out and take a look at here and we can see it's being scaled we can also add other properties like when pressed and something like that we saw that before right in the introduction where we do have something like uh wild hover wildtap and drag events so basically we are using all of the animation that are available to us via CSS with a JavaScript library that's why any CSS property could be animated um inside of divs so with this in place we are pretty much fine without navigation so we could further spice things out but um this looks decent for now all right so what we want to move uh to is uh if we visit this particular page then we could see the things sliding in from bottom to top but we want to fade in these images after we slide in and into this particular route so for that to happen we need something called what we call it so it's basically a bunch of variants and so because these are four um uh kind of HTML tags so we need to add these four tags with these kind of um syntax so bear in mind uh this is a particular syntax that I'll be writing for animating these cards and this would Implement some stagger effects inside of our cards here all right so with that in place oh let's visit our products and inside of our products we have these uh group relative which is the list of these cards probably this isn't about picture sorry all right so this is about page and we have couple of images here so we could add some um animation and firmer motion um props to our tags here now first let's start by importing motion from framework motion so we need to import firmware motion uh because it's a like we are experimenting things out with framework motion all right so uh let's also create some content so a first constant that I want to create is and call it variance so these variants um you can also use this object notation inside of our your tags itself but this would be some properties and that we are passing in to that particular tag and down below that we'll be dealing with and these variants are just the same thing that we saw here which is uh this and these are just constants and variances item and we are using variance list and passing the item as a variant so um same way we are declaring a constant and calling it variance and we are giving it a bunch of properties like hidden and so should be opacity of one and the staggered children would we would give it a value of 0.3 after that's done we are creating another constant and we are calling it images and inside images we are firstly uh hiding up the image into opacity one I mean opacity zero later on showing it with opacity one and a little bit of x-axis giving it an x-axis of 30 and showing it at zero and the transition duration is one after that has been added now we can further move down to our motion uh div and add variance inside there so and that's basically the image wrapper so it's this particular div so we can add motion.dev and also motion dot image to all of our images down here so let's go ahead and add motion dot image to all of our image all right so now we are ready to add some um props inside this particular motion dot div so I will add some couple of props so these are variants initial and animate so um with this prop uh in the parent parent it would be okay so that we could add some more props inside of our motion dot image and we can add variants and call it this particular constant that we made which is images so um variance is images so let's paste this image in all of the image all right so after adding the a variant prop and giving it images we are pretty much fine with this animation let's take a look at what it happens and you can see uh we also have the staggerfx you can see uh all image is not appeared at once it's just staggering things out so basically the source is from the documentation that the similar thing that we implemented so please read the documentation all right and let's go to product page and we want to implement the same thing with these cards so inside of your products let's go to products and go to page so that would be inside of products and we'll collapse this and um inside here we have a couple of um and these um group related which which is basically the car car items we want to do the same we want to First import motion from thermal motion so let's import a motion from frame of motion and we also want to add in some constants uh for example we will add variants which would be hidden initially and later on it will show up with opacity of one and transition Hood B stagger children with the value of 0.5 and also let's also Define and at the constant and call it images and obviously you can pass this object down here in your tags so to say so you can obviously pass this inside your tags now let's go ahead and change this so we will change We'll add a couple of props to our this particular div but we haven't really added motion so let's add motion dot div here and we can now add a couple of props so these props are basically on the props a similar kind of prop we added before which is variants are variance and initial is hidden and animate is shown all right with these props in place we can now add motion to these divs as well all right so it looks good um and now what we can do is we can also add variants and pass in variant as images for example we could add variants and this should be images because the variants are images now with this in place let's go ahead and probably I missed a variant um prop here let's go ahead and save and see that in action we can see that our cards is being staggered and everything isn't coming at once but sliding in which is great and it's a pretty much slick animation so far now the last piece is if we visit the contact page we want to visit the contact page and slide it slide in another image on top of this image we could like delete this image from the Dom and add another image but for now we could just sliding another image after we visit this particular route so uh that's uh pretty much easy to implement with the help of framer motion all right so now um let's go to contact us page and first thing is we want to import motion from frame promo motion and also we want to add this motion dot attribute to our image let's go ahead and grab this and add up in our image all right so here is the image and we can add motion dot to this particular image and another thing that we want to do is this should be relative so we have added related to this particular div and let's also add another image and we can add in the image here and this is uh the end of the image which comes on top of that particular image and this can this also uh like motion dot to our this image tag and it's initial animate and transition Properties or profit that we are passing here and uh this looks pretty much decent so now let's go ahead and see this whether this is working or not and we can see now everything is working as expected because we visited this particular route and the image was fitting in and yeah and this is pretty much it and it's pretty much how we could like manage things out for example we could also use this particular objects inside of our variants where we Define our variance so this could be right here as well so basically we we are like abstracting things out with the content instant and this is a good practice but the best practice would be like creating a separate file for the animation properties all right so in this video we'll learn about how we could not like integrate and experiment things with our next year's 13 and frame of motion we learned about how to blend these two things together I hope you learned something new from this so if you want to learn more around the topics of design and development Please Subscribe for more videos just like this don't forget to smash the like button for me it really helps me to create more content thanks a lot guys see you in the next one

Channel: For Those Who Code

Views: 54,889

Keywords: framer motion, framer-motion, next.js, javascript

Id: 0GgwX0nfAb0

Length: 25min 35sec (1535 seconds)

Published: Tue Nov 29 2022