Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Hey there, fellow code wizards! 👋 Ready to take your Next.js app from zero to hero with some mind-blowing route animations? Buckle up, because we’re about to dive into the magical world of Next.js app router and Framer Motion. Trust me, by the end of this, your users will be drooling over your silky smooth transitions!
The Problem: Boring, Static Route Changes 😴
Picture this: you’ve built an awesome Next.js app, but every time you navigate between pages, it feels like you’re teleporting through a black hole. Jarring, right? We can do better than that!
The Solution: Framer Motion to the Rescue! 💪
Enter Framer Motion – the superhero library that’s about to save your UI from the depths of dullness. We’re going to use it to create buttery smooth animations between our routes. Let’s get our hands dirty!
Step 1: Setup 🛠️
First things first, let’s get our project ready:
npm install framer-motion
# or
yarn add framer-motionStep 2: Create a Layout Component 🏗️
Now, let’s whip up a layout component that’ll wrap our pages:
// app/layout.js
import { motion, AnimatePresence } from 'framer-motion';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<AnimatePresence mode="wait">
<motion.main
key={router.pathname}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
>
{children}
</motion.main>
</AnimatePresence>
</body>
</html>
);
}Step 3: Spice Up Your Pages 🌶️
Now, let’s add some pizzazz to our individual pages:
// app/page.js
import { motion } from 'framer-motion';
export default function Home() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
>
<h1>Welcome to my awesome site!</h1>
{/* Your content here */}
</motion.div>
);
}Step 4: Create Some Sick Transitions 🎭
Want to really blow their minds? Let’s create a custom transition component:
// components/PageTransition.js
import { motion } from 'framer-motion';
const variants = {
hidden: { opacity: 0, x: -200, y: 0 },
enter: { opacity: 1, x: 0, y: 0 },
exit: { opacity: 0, x: 0, y: -100 },
};
export default function PageTransition({ children }) {
return (
<motion.div
variants={variants}
initial="hidden"
animate="enter"
exit="exit"
transition={{ type: 'linear' }}
>
{children}
</motion.div>
);
}Now, wrap your page content with this bad boy:
// app/about/page.js
import PageTransition from '../components/PageTransition';
export default function About() {
return (
<PageTransition>
<h1>About Us</h1>
{/* More content */}
</PageTransition>
);
}Step 5: Profit! 💰
And there you have it, folks! Your Next.js app is now smoother than a freshly waxed sports car. Your users will be sliding through your routes like butter on a hot pan.
But Wait, There’s More! 🎁
Want to take it to the next level? Here are some pro tips:
- Customize your animations: Play around with different Framer Motion properties to create unique transitions for each route.
- Performance matters: Keep an eye on performance. If things get sluggish, consider using the
useReducedMotionhook for users who prefer less motion. - Stagger those elements: Use Framer Motion’s
staggerChildrenproperty to create cascading animations for list items or grid layouts.
Wrapping Up 🎬
There you have it – you’re now a certified route animation ninja! 🥷 Your Next.js app is about to become the talk of the town, with transitions smoother than your pick-up lines.
Remember, with great power comes great responsibility. Use these animations wisely, and may your routes be forever fluid! Happy coding, you magnificent beast! 🚀✨