This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by aykacode
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>
);
};
This code creates a new App component that uses the Button component. When the button is clicked, it will log a message to the console.
You can learn more about React.js and Framer-motion by reading the documentation and exploring the examples on their respective websites.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by aykacode
aykacode | Sciencx (2022-12-11T23:09:45+00:00) Creating Smooth Animations in React with Framer-Motion. Retrieved from https://www.scien.cx/2022/12/11/creating-smooth-animations-in-react-with-framer-motion/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.