Making Web Animations With Framer Motion in React : A Practical Guide

If there's something I bet we can agree on, it's the fact that web animations make sites look 5 times greater! However, it is important to implement animations moderately for performance reasons and to get maximum visual satisfaction for users visiting your site — which is where I come in(inputs a head swell emoji). In this article, I will be writing about making the best use of web animations using Framer Motion in our React App. But hold on, what is Framer Motion?

What Is Framer Motion?

Framer Motion is a web animation library tailored particularly for React. Amazing, right? It has lots of animation techniques which can be implemented by making use of components, some of which I'll be explaining here, and others you can find on their official docs here.

Components

Components are not outrightly defined in the official Framer Motion docs, but I'll be doing that. In very simple terms, components are the working principles of Framer Motion. It can be loosely said to be a building block to get our motions working, or in this case, moving. All simple and complex motions are built on components.

What exactly does this article teach you?

This article does not aim at an in-depth explanation of all the components in Framer Motion — let's be real, the official docs is the most appropriate for that. Even better, I will be explaining concepts in Framer Motion that you absolutely need to get your web animations up and running. So I'll be saving you the time you would use to read the docs, which is lengthy and show you a practical usage, which I reckon is better! Enough talking, let's get into it, shall we?

Prerequisite

To properly understand this article, you need a basic knowledge of :

• JavaScript

• React

• CSS

• Tailwind CSS(which I will be using for basic styling, it's not necessary to know this but advised)

Now let's get into it, shall we?

Scaffolding a New React Project

To create a React project, you need Node.js installed on your local machine. If you haven't, you can download it here. I'll be using Vite as a build tool for this project, which I highly recommend as it is fast and gives a very optimized build. You can read more about Vite and all of its interesting features here. Now let's get to real business!

To create a new React project using Vite, run the line of code below in your terminal.

npm create vite@latest

Alternatively, you can directly specify the name of the project(in our project, "framer-motion-project" before runtime as shown below.

npm create vite@latest framer-motion-project --template react

This should install all the necessary packages needed for the development of a new React project.

Adding Framer Motion to our Project

To import the packages we'll be using, we run the code below

npm install framer-motion

After the installation, we can then add to our project by running the code below

//App.jsx
import { motion } from "framer-motion"

And that's it, we're all set.

Sample Webpage

To implement some basic Framer Motion animations, let's create a basic React webpage.

//App.jsx
import React from "React";
import "./App.css";


function App() {
  return (
    <div className="flex flex-col lg:flex-row  items-center">
             <div>
        <h1>Element 1</h1>
        </div>    

        <div>
        <h1>Element 2</h1>
        </div>
        </div>
          );
        }

export default App;

This simple code outputs the strings "Element 1" and "Element 2" which are placed side by side. It forms the basis for the motions we will be performing on them.

Motion Illustration

In our project, we want to carry out two basic motion illustrations.

1. "Element 1" moves from the left side of the screen to the middle.

2. "Element 2" moves from the right side of the screen to the middle.

Adding Animation to our Sample Page

The first step to adding animations using Framer Motion is to change the div we want to add motions to motion.div, this allows us to add animations to that particular div. Now we have our code looking like this :

//App.jsx
import React from "React";
import "./App.css";


function App() {
  return (
    <div className="flex flex-col lg:flex-row  items-center">
             <motion.div>
        <h1>Element 1</h1>
      </motion.div>   

          <motion.div>
        <h1>Element 2</h1>
        </motion.div>
        </div>
          );
        }

export default App;

Logic

To implement the animation, we create two events and store them in a variable as shown below.

const containerOne = {
  hidden: { x: "-100vw" },
 visible: { x: 0, transition: { duration: 1 } },
};

const containerTwo = {
  hidden: { x: "100vw" },
 visible: { x: 0, transition: { duration: 1 } },
};

The containerOne variable

Here, we have the details of our animation stored in our containerOne variable, inside it we have two defined variables(which you can name anything you want); hidden and visible, hidden which specifies when the element is out of the screen and visible which specifies when the element is shown on the screen.

The hidden variable

In our hidden variable, we have the value of x(which means our x-axis)set to -100vw, to add a few tips:

• When x is set to -100vw, it means the element is at the leftmost area, which is out of the viewport.

• When x is set to 0vw, it means the element is unaffected, it stays at or returns to its original position.

• When x is set to 100vw, it means the element is at the rightmost area, which is out of the viewport. We can use this when we want elements to move in from the right.

The visible variable

In the visible variable, we have the value of x set to 0, which means we want it to return to its original position. Also, we have the duration property which specifies the total period for the motion. It is measured in seconds.

The same set of rules apply for the containerTwo variable

Now we can add these specifications to our elements as shown below

import React from "React";
import "./App.css";

const containerOne = {
  hidden: { x: "-100vw" },
 visible: { x: 0, transition: { duration: 1 } },
};

const containerTwo = {
  hidden: { x: "100vw" },
 visible: { x: 0, transition: { duration: 1 } },
};

function App() {
  return (
    <motion.div 
        initial="hidden"
        animate="visible"
        variants={containerOne}
        className="flex flex-col lg:flex-row  items-center"
        >
               <motion.div>
        <h1>Element 1</h1>
      </motion.div>   

          <motion.div
        initial="hidden"
        animate="visible"
        variants={containerTwo}
        >
        <h1>Element 2</h1>
     </motion.div>
        </div>
          );
        }

export default App;

In the code above, adding the specifications to our elements is as easy as adding the initial and animate properties.

The initial property

The initial property, as the name implies, accepts values that specify the point where we would want our animation to start, just before the motion. For instance, if a boy runs from point A to point B, point A is the initial point, running is the motion property specified, and point B is the final point. In our code, the starting point of containerOne is -100vw while the starting point of containerTwo is 100vw.

The animate property

The animate property accepts values that take effect after the values of the initial property are being run. The initial property is dependent on the animate property, whose values show the exact pattern our motion will follow.

For example, if the initial property is set to -100vw, there is no motion until we set the value of the animate property. So if we set our animate property to 100vw, it means that element will move in a straight line from the leftmost part of the screen down to the rightmost part of the screen.

Output

The output shows the motion of element A from the leftmost part of the screen(-100vw) to its original position(0), and the motion of element B from the rightmost part(100vw) to its original position(0).

Similarly, we can set motion to come from the top by setting the value of y which means affects the y-axis. It works in the same manner.

Conclusion

Now that we know how to apply animations using Framer Motion in our React App, we can generate more complex animation sequences from this. Feel free to explore, check out the docs for more properties and practice some more! You can apply the knowledge gotten from this article to any of your static React projects and have some fun with it. With subsequent articles, I will be taking a deeper dive into Framer Motion and taking on some more complex animations. Thanks for reading and see you next time!