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:
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:
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:
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
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.
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! 🚀.
