Animating the Template with Framer Motion
To add animations, we’ll create a Template component. It will automatically produce beautiful page transitions after each router change or when the page loads. Create a new file called template.tsx.
“use client”;
import React from “react”;
import { motion } from “framer-motion”;
import React from “react”;
import { motion } from “framer-motion”;
export default function Template({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ ease: “easeInOut”, duration: 0.5 }}
>
{children}
</motion.div>
);
}
Final Thoughts
By combining Next.js with Framer Motion, we can create a professional and dynamic web layout that enhances user experience. This approach not only ensures smooth animations but also provides a structured and maintainable codebase.
Please follow and like us:
