How to animate in React using framer motion

In this blog we will be demonstrating about an animation library for React called Framer Motion. If you are completely new to animations in CSS, refer to the blog how to animate in CSS.

What is FramerMotion?

Framer Motion is a powerful animation and gesture library for React that helps developers create beautiful and engaging user interfaces. Whether you're a seasoned developer or just getting started with animation, Framer Motion provides a simple and intuitive way to add animations and interactions to your web projects. It uses a prop-based approach to create animations using motion components. Think of the motion component as a plain HTML or SVG element, supercharged with animation capabilities.

How to install it?

Run the below command to install it in your project:

npm install framer-motion        

How to use it?

Once you install it, you can now use it in your react app by importing it like below:

import { motion } from "framer-motion"        

Now that we have understood how to set up Framer motion in our project, let us create a simple sliding box animation using it, and right away you will see how easy it is to do that using this library.

In your App component write the below code.

App.js

import { motion } from 'framer-motion'
function App() {
  return (
    <div className='App'>
      <h1>Framer Motion Example</h1>
      <motion.div className='box' animate={{ x: 500 }} />
    </div>
  );
}

export default App;;        

That’s it! We have our animation ready! All we did was

1. Replaced ‘div’ with ‘motion.div’
2. Passed it a prop called ‘animate’

The only CSS I used here was the basic layout and giving width and height to the box.

index.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.App {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}        

Now let's see what exactly we did here.

As I mentioned earlier, Framer Motion uses motion components. Think of it as?“HTML tags with animation superpower”?if you will. Each HTML tag will have a corresponding motion tag. Example, <motion.div />, <motion.svg />, etc.

These motion components now allow us to pass some extra props to them like animate, transition, and some more.

In the above example, we used <motion.div> and passed x: 500 as a value to animate prop. This is why our box shifted rightwards by 500px.

Framer uses?“spring”?as the default animation. It provides a cool effect of bouncing back to the final state which seems more natural and physics-friendly. But you can of course change these default animations and some more properties using transition prop.

For example,

<motion.div
        className='box'
        animate={{ x: 500 }}
        transition={{ ease: easeOut, duration: 2, repeat: Infinity }}
      />        

Here, we have changed the animation to ‘easeOut’, increased the duration of the animation to 2 seconds, and made it run infinite times.

Why it's better than normal CSS?

Framer Motion provides a more powerful and flexible way to animate components compared to traditional CSS animations. Some of the key benefits of using Framer Motion include:

1. Declarative syntax: Framer Motion uses a declarative syntax for defining animations, which makes it easier to understand and maintain. This is in contrast to the imperative approach used in CSS animations, which can make the code more difficult to understand.
2. Component-based: Framer Motion animations are defined as components, which makes it easy to reuse and compose animations. This is in contrast to CSS animations, which are defined in a separate stylesheet and can be harder to reuse.
3. Physics-based animations: Framer Motion includes a set of animation functions that are based on physics principles, such as spring, which makes it easy to create realistic and natural-feeling animations.
4. Interaction support: Framer Motion provides a set of gesture functions that can be used to create complex interactions, such as drag-and-drop, swipe, and pinch-to-zoom.
5. Animation controls: Framer Motion provides a set of controls for controlling animations, such as play, pause, and reverse, which can be useful for creating more advanced animations.

Continue here