Framer Motion examples for React animations

When a tool like Framer Motion is available, why write many lines of CSS code to create an animation? Web applications look more exciting and beautiful when they are animated.

Many developers avoid adding animation to their web applications since animation codes can be rigorous to write. However, with Framer Motion, you can execute animations with only a few lines of code. This external library in React.js makes animation incredibly simple, allowing the developer to concentrate on other aspects of the project.

In this article, we'll examine Framer Motion's functionality, installation process, and usability by using it to animate text and images.

What is Framer Motion?

Framer motion is a powerful production-ready library from Framer that can create different animation styles in the DOM as elements. Framer Motion is an excellent alternative to making complex CSS animations. To use Framer Motion, you need to install the library and integrate it into your React project.

Getting started with Framer Motion in React

React requires that we install any external libraries using the npm package before utilizing them. Install Framer motion with the following command.

npm install framer-motion

The next step is to import the Framer Motion component you wish to use into your React app.

Getting started with text animation

In this section, we'll demonstrate how to use Framer Motion when animating text using the motion components.

Add the following code to your App.js file.

import { motion } from "framer-motion";

function App() {
    return (
        <div className="App">
            <motion.h1
                animate={{ x: [50, 150, 50], opacity: 1, scale: 1 }}
                transition={{
                    duration: 5,
                    delay: 0.3,
                    ease: [0.5, 0.71, 1, 1.5],
                }}
                initial={{ opacity: 0, scale: 0.5 }}
                whileHover={{ scale: 1.2 }}
            >
                Animation made easy with Framer Motion
            </motion.h1>
        </div>
    );
}
export default App;

We imported Framer Motion's motion component. Look closely at the h1 element you will notice how it differs from the standard h1 element.

The first step in using Framer Motion to animate is to use the motion component, which can be used with any standard HTML element.

We will give our text a cool entry animation to show gradually when the page reloads by utilizing the motion component in our h1 and a Framer Motion animate prop to accomplish the animation.

With this approach, we can animate our text to fulfill our desires. First, we assign a position to our text, indicating where the animation will take place. Then we will animate our text on the x-axis. You can set x to have a value of [0, 150, 50].

Next, let's give it an opacity of 1.

We need to assign a scale to the cool entering animation. We don't want anything wild. We can set the scale to 1. So when the text animation reaches scale 1, it stops increasing in size.

Finally, we use the Framer Motion transition prop because every effective animation requires a transition process. We will specify the duration, delay, and ease of our text animation inside this prop. Give it a duration of 5, a delay of 3, and an ease of [0.5, 0.71, 1, 1.01].

The easing shows the scale at which the text animation enters before going to its original scale.

Conclusion

Compared to regular CSS, You can see how easy it is to implement these animations with a few lines of code. Not to mention how you can use some Framer Motion components and props. Framer Motion has other powerful features we didn't cover in this article. You should check them out. I hope this article becomes valuable to you.