Creating Smooth Animations in React with Framer-Motion

React.js is a popular JavaScript library for building user interfaces. It allows you to create reusable components that can be shared among different parts of your application. Framer-motion is a popular animation library for React that makes it easy to create smooth, gesture-based animations.

Here is a simple tutorial on how to use React.js and Framer-motion together to create an animated button:

First, you will need to make sure that you have React.js and Framer-motion installed in your project. You can do this by running the following command:

npm install react react-dom framer-motion

Next, create a new file called "Button.js" and add the following code:

import React from 'react';
import { motion } from 'framer-motion';

const Button = ({ onClick }) => {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
    >
      Click me!
    </motion.button>
  );
};

export default Button;

This code creates a new Button component that uses the motion.button component provided by Framer-motion. When the button is hovered over, it will animate to a scale of 1.1. When the button is tapped, it will animate to a scale of 0.95.

To use this Button component in your application, you can import it and add it to your JSX like this:

import Button from './Button';

const App = () => {
  return (
    <div>
      <Button onClick={() => console.log('Button was clicked!')} />
    </div>
  );
};