{"id":21718,"date":"2022-10-26T07:14:16","date_gmt":"2022-10-26T14:14:16","guid":{"rendered":"https:\/\/coderpad.io\/?p=21718"},"modified":"2023-06-05T13:57:30","modified_gmt":"2023-06-05T20:57:30","slug":"how-to-animate-a-react-application-with-framer-motion","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/how-to-animate-a-react-application-with-framer-motion\/","title":{"rendered":"How to Animate A React Application With Framer Motion"},"content":{"rendered":"\n

Animations on web pages involve moving elements on the screen to improve the visual experience of users. These animations are visually appealing and tend to draw users’ attention to buttons, images, and other important information. Overall, it contributes to establishing a solid connection between users and the content on the screen.<\/p>\n\n\n\n

In the past, web pages were very plain and lacked interactivity because they were only intended to display information, and there was no capability to create appealing visual experiences. Things have changed dramatically in recent years, thanks to the availability of libraries and packages that make it easier to animate and add visual experiences to your web pages.<\/p>\n\n\n\n

This article will teach you how to use the Framer Motion library to animate a React application. Why should you use Framer Motion? And how it works by animating a mini-project.<\/p>\n\n\n\n

What is Framer Motion?<\/h2>\n\n\n\n

Framer Motion is an open-source production-ready motion library for React. It allows you to add all forms of animations and transitions directly to Document Object Model (DOM) elements defined in your React components. Its syntax is easy to understand, and with a few lines of code, you will be able to implement awesome animations.<\/p>\n\n\n\n

Framer Motion uses an awesome API that gives you access to the motion component. You can plug this component into your React DOM elements giving you access to additional props for animation. For example, the div<\/code> element will become motion.div<\/code>.<\/p>\n\n\n\n

The Framer Motion also has beginner-friendly documentation with lots of practical examples and illustrations showing how to perform simple to complex forms of animations and transitions.<\/p>\n\n\n\n

How Framer Motion works<\/h3>\n\n\n\n

Framer Motion uses the motion<\/code> component, which you can attach to any DOM element to implement an animation or transition effect. <\/p>\n\n\n

<motion.div<\/span>><\/span>\n    <p<\/span>><\/span> An animated text <\/p<\/span>><\/span>\n<\/motion.div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Nothing changes when you attach the motion<\/code> component to your element. Instead, it supercharges that element with animation capabilities, giving you access to props, keys, and values you can use to add any animation. For example, you can access the animate<\/code> prop, which takes in a dynamic value \u2014 an object which contains the different properties and values you want to animate.<\/p>\n\n\n
<motion.div<\/span> animate<\/span>={{x:<\/span> -10<\/span>, y:<\/span> 10<\/span>}}><\/span>\n    <p<\/span>><\/span> An animated text <\/p<\/span>><\/span>\n<\/motion.div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The above animation will cause the div<\/code> element to slide 10px<\/code> to the left and then 10px<\/code> to the bottom when it loads from the original position specified in style. <\/p>\n\n\n\n
\n
\u2139\ufe0f When units are not specified, calculations are done in pixels. You can also specify your preferred units by attaching them. For example: animate={{x:\"-10rem\"}}<\/code>.<\/p>\n<\/blockquote>\n\n\n\n
Getting started with Framer Motion in React<\/h2>\n\n\n\n
Framer Motion is a popular library with over 1.6 million weekly downloads<\/a>. You can install the library into your React project using the command below in your terminal:<\/p>\n\n\n
$ npm i framer-motion<\/code><\/span><\/pre>\n\n\n
Once you have installed it, you can verify if it has been installed in your package.json<\/code> file’s dependencies<\/code> object:<\/p>\n\n\n
\"dependencies\"<\/span>: {\n    \/\/ ...<\/span>\n    \"framer-motion\"<\/span>: \"^7.5.3\"<\/span>,\n    \"react\"<\/span>: \"^18.2.0\"<\/span>,\n    \/\/ ...<\/span>\n},<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
Once you have installed the Framer Motion library, you can import the motion<\/code> component into a component you wish to use within your project, and everything will work fine.<\/p>\n\n\n
import<\/span> { motion } from<\/span> 'framer-motion'<\/span>;\n\n<motion.h1<\/span> animate<\/span>={{x:<\/span> 10<\/span>, y:<\/span> 20<\/span>}}><\/span>\n    An animated text\n<\/motion.h1<\/span>><\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Animating elements in React<\/h2>\n\n\n\n
The motion<\/code> component can be applied to any DOM element within your React component. You can apply it to the container elements, headings, text elements, images, and other elements. This motion component gives you access to props like animate<\/code>, which you can use to adjust the color, size, position, display, and add other animation effects to the DOM element.<\/p>\n\n\n
<motion.div<\/span>\n    animate<\/span>={{<\/span>\n        x:<\/span> 10<\/span>,\n        backgroundColor:<\/span> '#fff<\/span>',\n        boxShadow:<\/span> '10px<\/span> 10px<\/span> 0<\/span> rgba<\/span>(0<\/span>, 0<\/span>, 0<\/span>, 0.2<\/span>)',\n    }}\n><\/span>\n    <h1<\/span>><\/span>Hi<\/h1<\/span>><\/span>\n    <img<\/span> src<\/span>={myImage}<\/span> alt<\/span>=\"\"<\/span> \/><\/span>\n<\/motion.div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
In the example above, the background color changes to white. A box shadow is added to the div<\/code> when it loads, and the elements contained in the div<\/code> moves 10px<\/code> to the right.<\/p>\n\n\n\n
It is also important to know that you can apply any form of animation based on CSS attributes. For example, you use x<\/code>, y<\/code>, and z<\/code> to move elements similar to translateX<\/code>, translateY<\/code>, and translateZ<\/code>. <\/p>\n\n\n\n
You can also scale the size of an element using the scale<\/code> attribute for both x<\/code> and y<\/code> or scaleX<\/code> and scaleY<\/code> if you wish to apply separate values. Example:<\/p>\n\n\n
<motion.div<\/span> animate<\/span>={{<\/span> scale:<\/span> 0.8<\/span> }} ><\/span>\n    <h1<\/span>><\/span>Hi<\/h1<\/span>><\/span>\n    <motion.img<\/span> animate<\/span>={{<\/span> scaleX:<\/span> 1.2<\/span> }} src<\/span>={myImage}<\/span> alt<\/span>=\"\"<\/span> \/><\/span>\n<\/motion.div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The same applies to transformation values like skew<\/code> and rotate<\/code>. It’s also important to mention that it supports all forms of value types, such as numbers, strings, and colors in Hex, RGB, and HSLA as strings. You can also calculate values using the calc()<\/code> function.<\/p>\n\n\n
<motion.img<\/span> animate<\/span>={{<\/span> x:<\/span> \"calc<\/span>(100vw<\/span> -<\/span> 50<\/span>%)\" }} src<\/span>={myImage}<\/span> alt<\/span>=\"\"<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Setting initial animation state<\/h3>\n\n\n\n
At this point, you have only used the animate<\/code> prop, which makes you animate elements from the default CSS style to your specified values. But this is not always what you want; sometimes, you want to specify where your animation starts and ends. For example, you might want your text to slide from the left of your screen to the middle.<\/p>\n\n\n\n
You can specify initial animation values using the initial<\/code> props, which work similarly to the animate<\/code> prop and uses similar attributes and values.<\/p>\n\n\n
<motion.div<\/span>\n    initial<\/span>={{<\/span> opacity:<\/span> 0<\/span>, x:<\/span> '-100vh<\/span>' }}\n    animate<\/span>={{<\/span> opacity:<\/span> 1<\/span>, x:<\/span> 0<\/span> }}\n><\/span>\n    <h1<\/span>><\/span>Hi<\/h1<\/span>><\/span>\n    <p<\/span>><\/span>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt\n        perspiciatis voluptates nihil dolores eum architecto eligendi\n    <\/p<\/span>><\/span>\n<\/motion.div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
How to add transition options to animation<\/h3>\n\n\n\n
You will notice that these animations happen fast to the extent that you might not see them unless you pay close attention. <\/p>\n\n\n\n