nextjs framer motion
Step 1: Install Required Packages
npm install next framer-motion
Step 2: Create a New Next.js App
npx create-next-app my-nextjs-app
cd my-nextjs-app
Step 3: Create a Component with Framer Motion
Create a new file, e.g., MyComponent.js
in the components
folder.
// components/MyComponent.js
import { motion } from 'framer-motion';
const MyComponent = () => {
return (
<motion.div
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
>
{/ Your component content here /}
<h1>Hello, Framer Motion!</h1>
</motion.div>
);
};
export default MyComponent;
Step 4: Use the Component in a Page
Edit the pages/index.js
file to import and use the MyComponent
component.
// pages/index.js
import MyComponent from '../components/MyComponent';
const Home = () => {
return (
<div>
<h1>Next.js with Framer Motion</h1>
<MyComponent />
</div>
);
};
export default Home;
Step 5: Start the Next.js App
npm run dev
Visit http://localhost:3000 in your browser to see the animated component.
Note: Customize the motion properties in the MyComponent
file according to your animation preferences.