Creating Stunning Animations with Framer Motion

Framer Motion makes it easy to create beautiful animations in React.Let's explore how to use it effectively.

Getting Started

First, install Framer Motion in your project:

npm install framer-motion

Then import the motion component in your file.

Basic Animations

The simplest animation uses the animate prop:

<motion.div animate={{ x: 100, opacity: 1 }} />

Gesture Animations

Respond to user interactions with hover and tap states:

<motion.button 
  whileHover={{ scale: 1.1 }} 
  whileTap={{ scale: 0.9 }} 
/>

Page Transitions

Use AnimatePresence for smooth enter/exit animations between pages or components.

Performance Tips

• Use the layout prop for smooth layout animations
• Avoid animating expensive properties like filter
• Use will-change sparingly

Conclusion

Framer Motion is a powerful tool for adding life to your React applications. Start simple and gradually explore more advanced features.