If you’re building apps with React or Next.js, Framer Motion is one of the best libraries to add smooth, high-performance animations with minimal effort.
What is Framer Motion?
Framer Motion is a production-ready animation library for React that lets you create:
Smooth animations
Page transitions
Scroll-based effects
Gestures (hover, tap, drag)
All with clean and readable code.
Installation
npm install framer-motion
Basic Animation Example
import { motion } from “framer-motion”;
export default function Example() {
return (
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Hello Framer Motion
</motion.div>
); }
✨ Why Developers Love Framer Motion
✅ Simple API – No complex CSS or JS ✅ Smooth Performance – 60fps animations ✅ Scroll Animations – whileInView, useScroll ✅ Page Transitions – Perfect for Next.js ✅ Gestures Support – Hover, tap, drag built-in ✅ Variants System – Reusable animation states
Common Use Cases
Landing pages
Cards & pricing sections
Modals & drawers
Scroll reveal animations
Portfolio websites
SaaS dashboards
Final Thought
Good design gets attention. Smooth motion keeps users engaged.
If you want your React apps to feel modern, polished, and professional, Framer Motion is a must-learn tool.