How to Use Framer Motion for Website Animations in Next.js
Animations can greatly enhance the user experience of a website by making it feel more dynamic and engaging. In this guide, we will explore how to use Framer Motion in a Next.js project to easily create animations.
What is Framer Motion?
Framer Motion is a popular animation library that provides a simple API for creating animations and transitions in React applications. It’s built on top of the Framer library and allows you to add fluid animations to your components without hassle.
Why Use Framer Motion in Next.js?
Next.js is a powerful React framework that handles server-side rendering and routing. When combined with Framer Motion, you can create fast, SEO-friendly websites with rich animations.
Step-by-Step Guide
Let’s walk through the process of integrating Framer Motion into a Next.js project.
1. Install Framer Motion
First, install the Framer Motion library in your Next.js project.
npm install framer-motion
Alternatively, you can use yarn
if you prefer:
yarn add framer-motion
2. Create an Animated Component
Once Framer Motion is installed, you can start using its motion
components to animate elements.
For example, let's create a simple fade-in animation for a heading:
// components/AnimatedHeading.js
import { motion } from "framer-motion";
const AnimatedHeading = () => {
return (
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
Welcome to WebDiv Studio!
</motion.h1>
);
};
export default AnimatedHeading;
In this example:
initial
sets the starting state of the animation (opacity: 0).animate
defines the end state of the animation (opacity: 1).transition
allows you to control the animation's duration.
3. Use the Animated Component in a Page
Now, import and use the animated component in one of your pages:
// pages/index.js
import AnimatedHeading from "@/components/AnimatedHeading";
export default function Home() {
return (
<div>
<AnimatedHeading />
<p>Your next-gen web development solution!</p>
</div>
);
}
When you load the homepage, the heading will fade in over 1 second.
4. Adding More Animations
You can easily add more animations by extending the motion
component to other HTML elements like div
, button
, or img
.
Here's an example of animating a button with a hover effect:
// components/AnimatedButton.js
import { motion } from "framer-motion";
const AnimatedButton = () => {
return (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
className="px-4 py-2 bg-blue-600 text-white rounded"
>
Get Started
</motion.button>
);
};
export default AnimatedButton;
Now, whenever you hover over the button, it will scale up, and when clicked, it will scale down slightly.
5. Page Transitions
Framer Motion also allows you to add page transitions in Next.js, making the experience between routes more seamless.
First, wrap your page layout with AnimatePresence
from Framer Motion:
// pages/-app.js
import { AnimatePresence } from "framer-motion";
function MyApp({ Component, pageProps, router }) {
return (
<AnimatePresence exitBeforeEnter>
<Component {...pageProps} key={router.route} />
</AnimatePresence>
);
}
export default MyApp;
Then, add a simple transition to your page components:
// pages/index.js
import { motion } from "framer-motion";
export default function Home() {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
<h1>Welcome to WebDiv Studio!</h1>
<p>Building stunning websites with Next.js.</p>
</motion.div>
);
}
Now, as you navigate between pages, each page will fade in and out smoothly.
Conclusion
Framer Motion is a powerful and easy-to-use tool for adding animations to your Next.js project. By following this guide, you can quickly create smooth, interactive animations to enhance your website's user experience.
Ready to level up your website with stunning animations? Give Framer Motion a try in your Next.js project today!
Want more tips on web development and design? Stay tuned to the WebDiv Studio blog for more tutorials and insights!