framer-motion in react

Framer-motion in React#

If you are a React developer and want to add smooth animations and transitions to your web app, then Framer-motion is the way to go. Framer-motion is a popular library that provides a powerful animation API for React components. With Framer-motion, you can easily create complex animations and transitions with just a few lines of code.

Installation#

First, you need to install Framer-motion in your project by running the following command in your terminal:

    npm install framer-motion
  

Basic Usage#

Once you have installed Framer-motion, you can import it in your React component and start animating. Here's a basic example:

    import { motion } from "framer-motion";

    const App = () => {
      return (
        <motion.div animate={{ x: 100 }}>
          <h1>Hello World</h1>
        </motion.div>
      );
    };
  

In the above example, we are importing the `motion` component from Framer-motion and using it to create an animated `div` element. We are animating the `div` element by changing its `x` position by 100 pixels.

Spring Physics#

Framer-motion provides a powerful animation API that allows you to use different types of physics for your animations. One of the most popular physics types is the "spring" physics, which creates a bouncy effect.

    import { motion } from "framer-motion";

    const App = () => {
      return (
        <motion.div animate={{ x: 100 }} transition={{ type: "spring", stiffness: 200, damping: 20 }}>
          <h1>Hello World</h1>
        </motion.div>
      );
    };
  

In the above example, we are using the `transition` property to apply the "spring" physics to our animation. We are setting the `stiffness` to 200 and the `damping` to 20 to control the bounciness of the animation.

Chaining Animations#

You can also chain multiple animations together using Framer-motion. Here's an example:

    import { motion } from "framer-motion";

    const App = () => {
      return (
        <motion.div
          animate={{
            x: 100,
            rotate: 180,
            scale: 1.5
          }}
          transition={{ duration: 1 }}
        >
          <h1>Hello World</h1>
        </motion.div>
      );
    };
  

In the above example, we are chaining three animations together: `x`, `rotate`, and `scale`. We are also setting a duration of 1 second for the transition between each animation.

Conclusion#

Framer-motion is a powerful animation library for React that provides an easy-to-use API for creating smooth animations and transitions. With Framer-motion, you can add life to your web app and make it more engaging for your users.