A Fun Guide to Using Framer Motion to Liven Up Your React App

Hello React Enthusiast! Today we dive into the exciting world of animations with Framer Motion. If you've ever wanted to give your React apps a little flair, this is the place. So let's get started without further ado.

What is Framer Motion?

First, what exactly is Framer Motion? Consider it your secret weapon for creating stunning animations in React with minimal effort. Whether you're an experienced developer or just starting out, Framer Motion's intuitive API makes it easy to add delightful motion to your web projects.

Get Started

Alright, let's roll up our sleeves and get started. Assuming you already have a React project set up, the first step is to install Framer Motion. Open a terminal and run:

​​​​​​npm install framer-motion

Once Framer Motion is installed, we're ready to begin!

The motion component

Framer-motion offers us a motion component. The motion component is the atomic unit of framer-motion. We can append the motion component to any html tag. For example:

import {motion} from 'framer-motion'
export const App =()=>{
return(
<>
  <motion.div></motion.div>
</>
)
}

Basic Animation

Let's start with something simple: animating a component. Imagine you have a card component in your React app and you want it to rotate smoothly when the component is rendered. This can be done as follows:

import { motion } from 'framer-motion';
const Card = () => {
return ( 
   <motion.div
       initial={{rotate:'0deg'}}
       animate={{rotate:'360deg'}}
       transition={{ duration:1 }}>
   </motion.div>
);
};
export default Card;

That's it! With a few lines of code, you've added a nice floating animation to your card.

Gestures

Many animation options, including Gestures, are available with Framer Motion. Gestures are a way of implementing animations when an events occurs.  It could be when a user clicks on a button or hovers on a component.
Some examples of the gestures props include whileTap, whileInView, whileHover

import {motion} from "framer-motion"
const Button = () => {
  return (  
      <motion.button      
           whileHover={{ scale: 1.1 }}
           whileTap={{scale:0.95,rotate:"2.5deg"}}
      >
          Click Me!
      </motion.Button>  
);
};

Variants

With variants, you can give your animations different states and have complete control over how they transition between them.

import { motion } from 'framer-motion';

const App = () => {
  const variants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  };

  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={variants}
    >
      Fade In Animation
    </motion.div>
  );
};

export default App;

Conclusion

And that's it, folks! A beginner's guide to using Framer Motion with React. Whether you're adding subtle hover effects or creating stunning page transitions, Framer Motion lets you bring your UI to life with ease. So go ahead, experiment and let your creativity shine. Your users will thank you for it! Happy animation! 🚀.