Animation using Framer-motion in React….
Hi Guys in this article we will discuss how to add animation to our React application using Framer Motion.Framer Motion is animation library for React, syntax is incredibly intuitive , it’s really simple to pickup and roam with, using just couple of lines of code instead of creating complex animation.
So to get started with Framer Motion , we will actually create a book ordering portal having normal functionality like ordering book with Author name and Book name.We will show a confirmation message and popup for further book ordering after ordering book .We will go through the whole code base but we will look into the animation part not the functionality part of the application, because we want to keep our focus on animation part with Framer Motion.So let’s get started :
So this is the folder Structure of our code base, it’s having the basic structure of create-react-app . We have added a components folder having Components which we are using in our application. Author.js is the Author page , Books is the book page, Header.js is global component,Home.js is the Home page. Loader.js is the Loader of our application, Modal.js is the popup which will appear after displaying the order details page and lastly Order.js is the order details page of our application.We will install few npm packages before starting coding:
We have installed few npm packages like framer-motion for animation, react-router-dom for adding routing in our application.We can install those packages by running following command on terminal of vscode:
npm i framer-motion react-router-dom
So let’s start with Index:
In Index.js we are importing React from react, ReactDOM from react-dom, we have imported Index.css for styling .Then we have imported App component for rendering it in our root component, lastly we have imported BrowserRouter as Router from ‘react-router-dom’. Now inside render section we are wrapping our App component with Router , so that we can implement routing in our application.So now let’s see the index.css:
Index.css is self explanatory , we have added styles according to our application requirement.Now let’s see our App.js file:
In App.js , we are importing React,useState from react,also Route,Switch,useLocation from ‘react-router-dom’,We have imported Header,Home,Author,Books,Order and Modal component for rendering them in our application. And we have also imported AnimatePresence from framer-motion. So AnimatePresence is used to add loading animation to any div , exitBeforeEnter is used to specify that animation should be added after the previous page exits totally , this setShowModal is mainly to show and hide the Modal. onExitComplete is actually called when the page exits.So We want the popup should be disappear whenever there is a transition between pages, So we set ShowModal to false.After that we have added Routing in our application using Switch .So Route actually decide which route should have which component, such as /author will show Author component, like that we are describing all the pages of our application.So let’s start with the HomePage of our application:
So Home.js is our application’s HomePage. So we are importing React from react, Link from ‘react-router-dom’,motion from framer-motion, and Loader Component.So Our Homepage is having one header and a button which lands to our Author Page. To add animation to any <div> in framer-motion we have to declare it as<motion.div>. It may be any <button>,<h1> tag if we want to add animation to it we have to declare it like <motion.h1> in case of <h1>. We have few convention here which we have to follow to add styles to our divs in framer.motion. So we have declared 2 constants one is containerVariants and another buttonVariants these are called variants these are actually used in our code to add animation in our specified <motion.div>s. Variants actually tells those divs which variants they should look for to add animation on them . So we want our Home Page should come with a smooth flash , initial actually define from which style our divs should appear , we want our page should come from opacity 0 to opacity 1, initial defined the initial style for which animation should start , so we are passing hidden in initial and set the opacity to 0, and visible shows the final state of our animation which is opacity:1 and in transition we are setting it to delay:1.5 means our page will start showing it’s content after 1.5 seconds and duration :1.5 means our page content will take 1.5 seconds for completing the animation. Similarly exit defines the exit animation of our div , x with -value means the div will appear from left and +value means div will appear from right. y with + value div will appear from down and -value div will appear from top. We want our div should appear from right so we set our value x with ‘-100vw’ and transition :{ease: ‘easeInOut’} to increase the smoothness of our transition. Now we want our button to have some text shadow, box shadow with transition of popping up and down infinitely while hovering on it.To add hovering effect in button we use whileHover . We want our button will continue that popping animation until we move our cursor outside our button for that we add yoyo style to infinity (yoyo is actually a build-in style which refers to that specific popping style in framer-motion). We can also specific number of times that animation should happen on hover. In Button we are using buttonVariants and passing ‘hover’ style to the whileHover parameter in <motion.button>. and lastly we are adding loader in our application.So now let’s see the loader component:
In Loader.js , so we are using a bouncing ball as our loader in our application,So how we are creating a ball ?. We are styling our loader class div to create a ball using css if we look at our index.css file we are adding style to div with class name loader. we have given width:10px, height:10px, margin 40px , border-radius :50% and background:white , so that it takes shape like a white colored ball.Now we adding two orientation of bouncing in our ball one vertically and another one is horizontally. So how we can do this ? we are adding a button below by which we can toggle the bouncing style of the ball . UseCycle is a build-in function in framer-motion which used to add a cycle in styling of divs. The syntax of useCycle is similar to the useState in React :
const [animation,cycleAnimation]=useCycle(“animationOne”,”animationTwo”)
So here we are creating a const animation ,cycleAnimation is the function which is used to toggle the value of the animation , so we are passing two values in the array of the useCycle animationOne and animationTwo. So the value will toggle between this two values whenever cycleAnimation is called. Now we are sending loaderVariants as the variant in our <motion.div>. Inside loaderVariants we are passing two values animationOne and animationTwo. animationOne is having x value from -20 to 20 means it will move from right to left, so to give bouncing style in our loader we will be adding yoyo in x and y of transition and setting duration to infinity so that it never stops. So animationOne is for horizontal bouncing similarly animationTwo in vertical bouncing. The first value in animation(UseCycle) is referred as the default value .So in initial load the ball will bounce horizontally .When we click on Cycle Loader button cycleAnimation() function is called and the mode of bouncing of our loader will also toggle accordingly.So we can see how easily we can implement those complex animation in framer-motion.Now let see our Header now:
In Header.js we are having a draggable logo and a heading. The most exciting fact about framer-motion is that we can make any of our div draggable by just adding drag in props of the div, dragConstraints are the restriction in direction means upto how much pixel in a particular direction we can drag our logo, dragElastic means our logo will return to it’s original step whenever we will drop it at any part of our screen.We actually want our logo to be draggable but not droppable so we put 0 to all the four direction and set dragElastic to 2 so that our logo returns to it’s original place after we drop the logo, this adds elasticity to our logo.So we can see how easily we can add draggable functionality to our div without writing a single javascript code.For the heading part we are adding initial to y: -250 means it will come from top , animate y: -10 , we are adding delay of 0.2 seconds and type: ‘spring’ means the text will appear like a spring and stiffness to 120 , these means, in 0.2 seconds the text will spring with a speed of 120, and if we increase the value of stiffness we will see the oscillation of our text will increase before settling. Now till see the Author file:
In Author.js , we want our page should appear from right , with a flash and spring effect with a delay of 0.5 seconds and the page should exit through left with ease transition. So to achieve that we are setting the styles in containerVariants and using it as variants in the parent div to the Author page, just play with the values to get more idea about the styling.Now let’s see the Author list part , there we want to add hovering effect so that on hover it will increase in size and color of the text will also change , we have added a transition type of spring and stiffness:300 means we want size scaling of the text should appear with some spring effect.We want our Next Button should appear when an author is selected for that when ever user click on the Author name , the author gets added in books object. So we are checking whenever books.author is present the button should appear.Now we want our button should appear from left side with a spring effect so we set hidden value of nextVariants to x:-100vw and visible value to x:0 and transition :{type: ‘spring’ ,stiffness:120} same as heading in Header.The Buttons of our whole application will have same hovering effect like in HomePage. So we have just copy pasted hovering style from the Home.js to Author.js. Now let’s see the Books file:
Books.js is the page in which user will select the book which they are going to order.It’s having same dom and animation style like Author.js .Now let’s see the order file:
In Order.js , we show our user the order details, The entry animation is little bit different from other pages. We want the animation style should apply first in the parent div of the page and after 0.4 seconds it will be applied to the children divs for that reason we have added few extra lines of styles in visible part of containerVariants like transition:{ type: ‘spring’ ,mass:0.4,damping:8,when: ‘beforeChildren’, staggerChildren:0.4 }
We want our parent div style should be completed before the child div animation and children animation should applied after 0.4 seconds.Damping and mass are the parameters which are used to adjust synchronization between parent and child div animation.We want our modal means popup should appear after 5 seconds of our Order page loading . So we used UseEffect to setShowModal value to true after 5 seconds using setTimeout function.Now let’s see the Modal file:
Our Modal will appear only when showModal is true. Our Modal component will have a flash effect for that we added visible :{opacity:1},hidden:{opacity:0} in backdrop.We want our Modal should come from top so we added hidden: { y: “-100vh”, opacity: 0 } in modal variant.We want our Modal should exit whenever route changes or whenever user goes to any other page , for that reason we wrapped our modal with <AnimatePresence exitBeforeEnter>.So our fully animated application is read. Let’s see how it looks like:
So it’s just a introductory article on Framer-motion .We can do many exciting things using Framer-motion . So I suggest you to go through the official documentation of Framer-motion to explore more about it .I want to thank Net Ninja for the incredible work they have done on explaining the concept so elaborately, really Appreciate the effort they used to put to each of their content I will suggest you please watch the video before starting with the official documentation. Please check out the video.
I am leaving my git-hub link down below as the reference of this article :
HAPPY CODING….:)
